.tabbed-mosaic-container {
	position: relative;

	.header {
		margin-bottom: 10px;
	}

	.title {
		padding: 0 var(--space-5);
		margin-bottom: var(--space-5);
		font-family: var(--font-display);
		font-weight: var(--font-weight-normal);
		font-size: 1.75rem;
		line-height: 1.2;
		color: var(--black);
	}

	.tabs-row {
		display: flex;
		gap: var(--space-5);
		width: 100%;
		max-width: max-content;
		padding: 0 var(--space-5) var(--space-5);
		margin: 0 auto;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
	}

	.tab-button {
		padding: var(--space-3) 26px;
		font-size: 0.8125rem;

		&.active {
			--background-color: var(--sage);
			--background-color-hover: var(--sage);
			
			border-color: var(--sage);
		}
	}

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

	.mosaic-tab,
	.mosaic-tab.in {
		opacity: 0;
		visibility: hidden;
	}

	.mosaic-tab.active,
	.mosaic-tab.in,
	.mosaic-tab.out {
		display: block;
	}

	.mosaic-tab.active,
	.mosaic-tab.out {
		opacity: 1;
		visibility: visible;
	}

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

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

	@media (min-width: 40em) {
		.title {
			font-size: var(--text-4xl);
			text-align: center;
		}
	}

	@media (min-width: 64em) {
		.header {
			margin-bottom: var(--space-5);
		}

		.tabs-row {
			gap: 66px;
		}
	}
}