@layer components {
	.accordion-section{
		--max-column-size: 72.5rem;
		--row-gap: 4.375rem;
		background-color: hsl(var(--clr-cream));
		padding-block-end: 4.6875rem;
	}

	.accordion-section .see-all{
		text-align: center;
	}

	.accordion-section h2{
		text-align: center;
	}

	.accordion-container{
		display: grid;
		grid-auto-columns: 1fr;
		gap: 2rem;
	}

	.accordion{
		background-color: white;
		padding: 1.75rem 3.125rem;
		box-shadow: -1px 2px 6px rgba(0,0,0,.05);
	}

	.accordion-header{
		font-weight: 500;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.accordion-header:after{
		content: '\f054';
		font-family: FontAwesome;
		transition: transform .3s;
	}

	.accordion.open .accordion-header:after{
		transform: rotate(90deg);
	}

	.accordion-content{
		overflow: hidden;
		height: 0;
		padding-block-start: 0;
		transition: height .3s, padding-block .3s;
	}

	.accordion.open .accordion-content{
		padding-block-start: 1rem;
	}
}