@layer components {
	.tab-section{
		--max-column-size: 72.5rem;
	}

	.tab-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		padding-bottom: 2.5rem;
		margin-bottom: 2.5rem;
		border-bottom: 1px solid hsl(0, 0%, 44%);
	}

	@media(min-width: 768px){
		.tab-list{
			display: grid;
		}
	}

	.tab-list .tab{
		font-size: 1.15rem;
		padding: .8rem 1rem .5rem;
		border-bottom: 3px solid transparent;
		text-align: center;
		cursor: pointer;
		transition: background-color .3s, color .3s, border-color .3s;
		min-width: 5.625rem;
	}

	.tab-list .tab:hover{
		border-color: hsl(var(--clr-teal));
	}

	.tab-list .tab.active{
		background-color: hsl(var(--clr-teal));
		color: white;
		border-color: hsl(var(--clr-teal));
	}

	.tab-contnet-container{
		position: relative;
	}

	.tab-content{
		--column-gap: 2.5rem;

		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s;
	}

	.tab-content.active{
		opacity: 1;
		pointer-events: all;
		position: static;
	}

	.tab-content img{
		width: 100%;
	}
	.tab-content > div{
		position: relative;
		top: -3em;
	}

	.tab-content h3{
		margin-block: .5em;
	}

	.tab-content .details-link{
		display: inline-block;
		margin-block-start: .5rem;
		font-weight: 500;
		color: black;
		text-decoration: none;
	}

	.tab-content .details-link:after{
		content: '\f054';
		font-family: FontAwesome;
		font-size: .9rem;
		margin-left: .25em;
	}
}