/**
 * Metropolis Testimonials.
 *
 * Centred: a modest heading, then each quote under a large serif opening mark,
 * with the name and organisation beneath. One quote reads as a single feature;
 * two or three sit side by side at a slightly smaller size.
 */

.testimonials {
	text-align: center;
}

.testimonials__title {
	max-width: 24ch;
	margin: 0 auto clamp(28px, 3.5vw, 44px);
	font-size: clamp(1.625rem, 2.4vw, 2.125rem);
	line-height: 1.15;
}

.testimonials__grid {
	display: grid;
	gap: clamp(40px, 5vw, 72px);
	margin-inline: auto;
}

.testimonials__grid--1 { max-width: 46rem; }
.testimonials__grid--2 { max-width: 64rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.testimonials__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.quote {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}

/* The opening mark, set in the display serif: typographic, not an icon. */
.quote__mark {
	display: block;
	height: 0.5em;
	margin-bottom: 18px;
	font-family: var(--serif);
	font-size: 4rem;
	line-height: 1;
	color: var(--fascia);
}

.quote__text {
	max-width: 40ch;
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(1.1875rem, 1.7vw, 1.375rem);
	line-height: 1.5;
	color: var(--fascia);
	text-wrap: pretty;
}

.testimonials__grid--2 .quote__text,
.testimonials__grid--3 .quote__text {
	font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
}

.quote__source {
	display: grid;
	gap: 2px;
	justify-items: center;
	margin-top: 20px;
	font-size: 1rem;
}

.quote__name {
	font-weight: 600;
}

.quote__org {
	color: var(--ink-soft);
}

.is-fascia .quote__mark,
.is-fascia .quote__text { color: var(--on-fascia); }
.is-fascia .quote__org { color: var(--on-fascia-soft); }

@media (max-width: 960px) {
	.testimonials__grid--2,
	.testimonials__grid--3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
	.quote__mark { font-size: 3.25rem; margin-bottom: 14px; }
}