@layer components {
	.accordion-container {
		display: grid;
		grid-auto-columns: 1fr;
		gap: 0;
	}

	.accordion {
		padding: 2.5em 2em;
		border-bottom: 1px solid hsl(var(--clr-medium-teal));
	}

	.accordion-header {
		font-weight: 400;
		font-size: 1.375em;
		cursor: pointer;
		display: flex;
		align-items: center;
	}

	.accordion-header:after {
		content: '\f054';
		font-family: FontAwesome;
		transition: transform .3s;
		margin-left: auto;
		font-weight: 300;
		font-size: 1.5em;
	}

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

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

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