.accordion-container .frame-type-accordion-item {
	border-top: 1px solid var(--color-border);
	margin: 0;
	border-bottom: 0;
	padding: var(--vr-spacing-1) var(--hr-spacing-1);
}

.accordion-container .frame-type-accordion-item__active {
	background: var(--color-light-gray);
}

.accordion-container .frame-type-accordion-item:last-of-type {
	border-bottom: 1px solid var(--color-border);
}

.frame-type-accordion-item .accordion-item {
	display: grid;
	grid-template-rows: 0fr; /* or 1fr when open */
	transition: grid-template-rows 0.75s var(--animation-timing-function);
	overflow: hidden;
	font-size: var(--font-size-copytext-small);
}

.frame-type-accordion-item__active .accordion-item {
	grid-template-rows: 1fr; /* or 1fr when open */
}

.frame-type-accordion-item > .frame--inner > header {
	display: grid;
	grid-template:
		'title icon' auto
		/ auto auto;
	column-gap: var(--hr-spacing-1);
	text-decoration: none;
	padding: 0;
	align-items: center;
	cursor: pointer;
}

.accordion-item__icon {
	grid-area: icon;
	font-size: 40px;
	justify-self: end;
	align-self: center;
	display: none;
}

.accordion-item__icon--active {
	display: block;
}

.frame-type-accordion-item > .frame--inner > header > h1,
.frame-type-accordion-item > .frame--inner > header > h2,
.frame-type-accordion-item > .frame--inner > header > h3 {
	grid-area: title;
	font-size: var(--font-size-copytext-small);
	margin: 0;
}

.accordion-item .frame {
	border: 0;
	margin: var(--vr-spacing-1) 0 var(--vr-spacing-2) 0;
}