@layer wpsa.modules {
	.wpsa-stats {
		display: grid;
		gap: var(--wpsa-space-lg);
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
		margin: 0;
		padding-block-start: var(--wpsa-space-md);
		border-block-start: 1px solid var(--wpsa-color-border);
	}

	.wpsa-stat {
		display: flex;
		flex-direction: column;
		gap: var(--wpsa-space-3xs);
	}

	.wpsa-stat__value {
		font-family: var(--wpsa-font-heading);
		font-size: clamp(2.25rem, 4vw, 3.25rem);
		font-weight: 680;
		line-height: 1;
		letter-spacing: -0.03em;
		/* The figure is the point of the component, so it takes the accent
		   rather than competing with the label for neutral text colour. */
		color: var(--wpsa-color-accent);
		font-variant-numeric: tabular-nums;
	}

	.wpsa-scheme--dark .wpsa-stat__value,
	.wpsa-scheme--accent .wpsa-stat__value {
		color: currentColor;
	}

	.wpsa-stat__label {
		margin: 0;
		color: var(--wpsa-color-text-muted);
		font-size: var(--wpsa-text-sm);
		text-wrap: balance;
	}
}