@layer components {
	.stat-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 0;
	}

	@media (max-width: 49.999em) {
		.stat-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.stat-strip {
		display: flex;
		flex-direction: column;
		text-align: center;
		padding: calc(var(--stack) * 2);
		border-inline-end: 1px solid var(--color-border);
	}

	.stat-strip:last-child {
		border-inline-end: none;
	}

	.stat-strip__value {
		font-family: var(--font-family-heading);
		font-size: 40px;
		font-weight: var(--font-weight-bold);
		letter-spacing: -0.04em;
		color: var(--stat-color, var(--color-text));
	}

	.stat-strip__label {
		font-size: 14px;
		font-weight: var(--font-weight-medium);
		line-height: 20px;
		color: var(--color-text-muted);
	}
}