.tab-container {
	position: relative;
	margin-bottom: 60px;
	color: var(--blue-dark);

	.tab-container-header {
		max-width: 1200px;
		padding: 0 var(--space-5);
		margin: 0 auto 30px;
	}

	.tab-container-title {
		margin-bottom: var(--space-5);
		text-align: center;
		color: inherit;
	}

	&:not(:has(.tab-button)) .tab-container-title {
		margin-bottom: 0;
	}

	.title-script,
	.title-serif {
		display: block;
	}

	.title-script {
		margin-bottom: var(--space-2);
		font-family: var(--font-script);
		font-weight: var(--font-weight-bold);
		font-size: 2.5rem;
		line-height: normal;
	}

	.title-serif {
		font-family: var(--font-playfair);
		font-weight: var(--font-weight-black);
		font-size: 2.875rem;
		line-height: 0.913;
	}

	.tabs-nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	&:not(:has(.tab-button)) .tabs-nav {
		display: none;
	}

	.tab-button {
		position: relative;
		z-index: 2;
		display: block;
		padding: var(--space-2) 10px;
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-sm);
		line-height: 1;
		letter-spacing: 0.0625em;
		text-transform: uppercase;
		text-align: center;
		color: rgba(255, 255, 255, 0.9);
		background-color: var(--blue-darker);
		border-radius: var(--rounded-full);
		transition:
			color var(--transition-appendix),
			background-color var(--transition-appendix);

		&::before {
			position: absolute;
			inset: calc(100% - 0.45em) auto auto 50%;
			translate: -50% 0;
			z-index: -1;
			display: block;
			font: var(--fa-font-solid);
			font-size: var(--text-xl);
			line-height: 1;
			color: var(--blue-darker);
			content: '\f0d7';
			opacity: 0;
			pointer-events: none;
			transition:
				color var(--transition-appendix),
				opacity var(--transition-appendix);
		}

		&.active {
			color: var(--blue-dark);
			background-color: var(--blue);

			&::before {
				color: var(--blue);
				opacity: 1;
			}
		}
	}

	.tab-inner {
		display: none;
		opacity: 0;
		visibility: hidden;

		&,
		&.in {
			opacity: 0;
			visibility: hidden;
		}

		&.active,
		&.in,
		&.out {
			display: block;
		}

		&.active,
		&.out {
			opacity: 1;
			visibility: visible;
		}

		&.in {
			animation: fade-in 0.3s ease 0s 1 normal forwards;
		}

		&.out {
			animation: fade-out 0.3s ease 0s 1 normal forwards;
		}
	}

	@media (hover: hover) {
		.tab-button:hover {
			color: var(--blue-dark); 
			background-color: var(--blue);
		}
	}

	@media (min-width: 64em) {
		margin-bottom: var(--space-20);

		.tab-container-header {
			margin-bottom: 50px;
		}

		.title-script {
			font-size: 3.5rem;
		}

		.title-serif {
			font-size: 4.375rem;
		}

		.tabs-nav {
			gap: 15px;
		}

		.tab-button {
			padding: 10px 15px;
			font-size: var(--text-base);
		}
	}
}