.c-tabs {
	margin: 6rem 0;
	position: relative;
	container-type: inline-size;
}

.c-tabs.visible {
	@media (min-width: 1024px) {
		.c-tabs__panel-title {
			animation: slideUp 600ms ease both;
		}

		.c-tabs__panel-rich-text {
			animation: slideUp 600ms 250ms ease both;
		}

		.c-tabs__cta {
			animation: slideUp 600ms 450ms ease both;
		}
	}
}

.c-tabs__panel-title,
.c-tabs__panel-rich-text,
.c-tabs__cta {
	@media (min-width: 1024px) {
		opacity: 0;
	}
}

.c-tabs__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rem;
}

.c-tabs__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.c-tabs__tabs {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.c-tabs__body {
	display: flex;
	flex-direction: row-reverse;
	width: 100%;

	@container (min-width: 1024px) {
		gap: 8rem;
	}

	@container (min-width: 768px) and (max-width: 1023px) {
		gap: 4rem;
	}

	@container (max-width: 767px) {
		flex-direction: column;

		gap: 3rem;
	}
}

.c-tabs__picture {
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		background: url('/app/themes/mezcalito/assets/images/rounded-mini-mask.svg') no-repeat 0 0;
		background-size: 100% auto;
		position: absolute;
		top: -1px;
		left: -1px;
		width: calc(100% + 2px);
		height: 100%;
		transform: scaleX(-1);
	}

	@container (min-width: 768px) {
		flex-shrink: 0;
		width: 40.5vw;
		height: 66.5vw;
		max-width: 56.6rem;
		max-height: 56.6rem;
	}

	@container (max-width: 767px) {
		width: 90%;
		height: 115vw;
	}
}

.c-tabs__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-tabs__panels {
	flex-grow: 1;

	@container (min-width: 1024px) {
		padding: 6rem 10.7% 6rem 0;
	}

	@container (min-width: 768px) and (max-width: 1023px){
		padding: 4rem var(--page-gutter) 4rem 0;
	}

	@container (max-width: 767px) {
		padding: 0 var(--page-gutter) 3rem;
	}
}

.c-tabs__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
	transition: opacity var(--transition-in-out);
	opacity: 1;
	pointer-events: auto;

	&.is-hidden {
		opacity: 0;
		pointer-events: none;
		display: none;
	}
}