/* ==========================================================================
   Results stats
   ========================================================================== */

/* Centred, unlike the rest of the page, to vary the rhythm. */
.stats {
	padding-block: var(--space-section);
	text-align: center;
	color: var(--on-blue);
	background-color: var(--brand-blue);
}

.stats__title {
	max-width: 24ch;
	margin-inline: auto;
	/* Headings are left aligned site-wide, so centre this one explicitly. */
	text-align: center;
	color: var(--on-blue);
}

/* Stacked on phones, two by two on tablets, four across from 64em. */
.stats__grid {
	display: grid;
	gap: var(--space-6);
	margin-top: var(--space-7);
	padding: 0;
	list-style: none;
}

/* Number and label styles are shared (.stat in components.css). Here they are
   centred to match the section. */
.stats .stat__label {
	margin-inline: auto;
}

@media (min-width: 36em) {
	.stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.stats__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-top: var(--space-8);
	}

	/* Largest size that keeps "50 to 100%+" inside a quarter-width column. */
	.stats .stat__number {
		font-size: var(--text-3xl);
	}
}