.tabbed-blog-container {
	position: relative;
	z-index: 2;
	padding: var(--space-10) var(--space-5) 60px;
	margin-bottom: 62px;
	color: var(--white);
	background:
		url('../svg/damascus-pattern-blue.svg') repeat center center / 745px auto,
		radial-gradient(154.41% 63.3% at 50% 50%, #0F2747 47.68%, #0D213D 100%);
		
	&::before {
		position: absolute;
		inset: -5px 0;
		z-index: -1;
		display: block;
		content: '';
		border-top: 10px dotted var(--blue-dark);
		border-bottom: 10px dotted var(--blue-dark);
	}
	
	.panel-inner {
		max-width: 995px;
		margin: 0 auto;
	}

	.tabbed-blog-header {
		margin-bottom: 30px;
		text-align: center;
	}

	.tabbed-blog-title {
		margin-bottom: 30px;
	}

	.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;
		color: rgba(255, 255, 255, 0.85);
	}

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

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

	.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;
			}
		}
	}

	/*----- media queries -----*/

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

	@media (min-width: 64em) {
		padding: 60px var(--space-5) 100px;
		background-attachment: fixed;
		background-size:
			1500px auto,
			100% 100%;

		.tabbed-blog-header {
			margin-bottom: var(--space-10);
		}

		.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);
		}
	}
}