.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.375rem;
	margin: 0;
	padding: 0;
	color: var(--color-dark-base);
	list-style: none;
}

.stats-grid--few {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr));
}

.stats-grid:not(:first-child) {
	margin-top: var(--spacing-block-medium);
}

.stats-grid:not(:last-child) {
	margin-bottom: var(--spacing-block-medium);
}

.stats-grid--secondary {
	gap: 1rem;
	padding: 0.625rem 1rem;
	border: 1px solid var(--color-primary-border);
	border-radius: 0.5rem;
	background: var(--color-primary-surface);
}

.stats-grid__item {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.125rem;
	overflow-wrap: anywhere;
}

.stats-grid--secondary .stats-grid__item {
	gap: 0.5rem;
}

.stats-grid__value,
.stats-grid__label {
	display: block;
	margin: 0;
}

.stats-grid__value {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}

.stats-grid__label {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.28;
}

.stats-grid--secondary .stats-grid__value {
	font-size: 1.375rem;
	line-height: 1.2;
}

.stats-grid--secondary .stats-grid__label {
	color: var(--color-muted);
}

@media (min-width: 740px) {
	.stats-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.625rem), 1fr));
		gap: 2rem;
	}

	.stats-grid--secondary {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
		padding: 0.875rem 1.75rem;
	}

	.stats-grid__item {
		gap: 0.375rem;
	}

	.stats-grid--secondary .stats-grid__item {
		flex-direction: row;
		align-items: center;
		gap: 0.875rem;
	}

	.stats-grid__value {
		font-size: 2.5rem;
		line-height: 1.14;
	}

	.stats-grid__label {
		font-size: 1rem;
		line-height: 1.4;
	}

	.stats-grid--secondary .stats-grid__value {
		font-size: 1.75rem;
	}
}

@media (min-width: 1200px) {
	.stats-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
		gap: 1.5rem;
	}

	.stats-grid__item {
		flex-direction: row;
		align-items: center;
		gap: 0.875rem;
	}

	.stats-grid__value {
		font-size: 2.875rem;
		line-height: 1.22;
	}

	.stats-grid--secondary {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	}

	.stats-grid--secondary .stats-grid__value {
		font-size: 1.75rem;
		line-height: 1.2;
	}
}
