.flex-layout.content_statistics {
	--bg-color: var(--neutral-90);
	--text-color: var(--primary-100);
	--statistic-line: var(--primary-20);
}

/* CLA: altijd teal met witte tekst. */
body.site-3 .flex-layout.content_statistics {
	--bg-color: var(--accent-100);
	--text-color: var(--white-100);
	--statistic-line: var(--accent-80);
	--pk-heading-color: var(--white-100);
}

/* Stip van de eyebrow is anders accent-100 en valt weg op teal. */
body.site-3 .flex-layout.content_statistics .nova-eyebrow::before {
	background-color: var(--white-100);
}

/* Zelfde knop als op andere teal secties (zie buttons.css). */
body.site-3 .flex-layout.content_statistics .pk-button {
	background-color: var(--accent-90);
	outline-color: var(--accent-80);
	color: var(--white-100);
}

.flex-layout.content_statistics .image-col img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.flex-layout.content_statistics .content-col {
	display: flex;
	flex-direction: column;
	padding: max(2.5rem, calc(2.5 * var(--su))) max(3rem, calc(3 * var(--su)));
}

.flex-layout.content_statistics .content-col .pk-heading {
	max-width: max(31.25rem, calc(31.25 * var(--su)));
}

.flex-layout.content_statistics .statistics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto 1fr auto auto;
	column-gap: max(1rem, calc(3.5 * var(--su)));
	margin-top: max(1.5rem, calc(2 * var(--su)));
}

.flex-layout.content_statistics .statistic {
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
}

.flex-layout.content_statistics .statistic .nova-eyebrow {
	margin-bottom: max(.75rem, calc(1 * var(--su)));
}

.flex-layout.content_statistics .statistic .title {
	margin-bottom: 0;
	font-size: var(--body-s-regular);
}

.flex-layout.content_statistics .statistic hr {
	margin-block: max(1rem, calc(1 * var(--su)));
	height: 1px;
	width: 100%;
	border: 0;
	background-color: var(--statistic-line);
}

.flex-layout.content_statistics .statistic-value {
	font-family: var(--pk-heading-font-family);
	font-weight: 300;
	font-size: max(2.5rem, calc(2.5 * var(--su)));
}

/* Tekst-statistieken: 3 per rij, onbeperkt aantal; titel, lijn en tekst lopen per rij gelijk. */
.flex-layout.content_statistics .statistics-text {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: none;
	grid-auto-rows: auto;
}

.flex-layout.content_statistics .statistics-text .statistic {
	grid-row: span 3;
}

.flex-layout.content_statistics .statistics-text .statistic:nth-child(n + 4) {
	margin-top: max(2rem, calc(2 * var(--su)));
}

.flex-layout.content_statistics .statistics-text .statistic .title {
	font-size: var(--body-m-regular);
	font-weight: 400;
}

.flex-layout.content_statistics .statistics-text .statistic .pk-text {
	font-size: var(--body-xs-regular);
	color: var(--text-color);
}

.flex-layout.content_statistics .pk-button-group {
	margin-top: max(2rem, calc(2 * var(--su)));
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {

	.flex-layout.content_statistics .image-col {
		aspect-ratio: 345/400;
	}

	.flex-layout.content_statistics .content-col {
		padding: 0;
	}

	.flex-layout.content_statistics .statistics-text {
		grid-template-columns: minmax(0, 1fr);
	}

	.flex-layout.content_statistics .statistics-text .statistic:nth-child(n + 2) {
		margin-top: max(2rem, calc(2 * var(--su)));
	}

}