.testimonials {
	padding-block: var(--space-8);
}

.testimonials--editorial-header {
	border-top: 1px solid var(--color-border-subtle);
}

.testimonials__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-5);
}

.testimonial-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: var(--space-6);
}

.testimonial-card::after {
	position: absolute;
	top: var(--space-4);
	right: var(--space-5);
	color: var(--color-background-section-muted);
	font-family: Georgia, serif;
	font-size: 5rem;
	font-weight: var(--font-weight-bold);
	line-height: 1;
	content: "\201C";
	pointer-events: none;
}

.testimonial-card__rating {
	min-height: 1.5rem;
	margin-block-end: var(--space-4);
	color: var(--color-brand-accent);
	font-size: var(--font-size-title-compact);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-eyebrow);
	line-height: var(--line-height-heading);
}

.testimonial-card__quote {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	border: 0;
}

.testimonial-card__quote > :first-child {
	margin-block-start: 0;
}

.testimonial-card__quote > :last-child {
	margin-block-end: 0;
}

.testimonial-card__attribution {
	display: grid;
	gap: var(--space-1);
	margin-block-start: auto;
	padding-block-start: var(--space-5);
}

.testimonial-card__customer {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-title-compact);
	font-style: normal;
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	text-transform: uppercase;
}

.testimonial-card__detail {
	color: var(--color-muted);
	font-size: var(--font-size-body-sm);
}

@media (min-width: 48rem) and (max-width: 62rem) {
	.testimonials--editorial-header .testimonials__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 62rem) {
	.testimonials--editorial-header .testimonial-card:first-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 36rem) {
	.testimonial-card {
		padding: var(--space-5);
	}
}