.flex-layout.statistics {
	--bg-color: var(--primary-100);
	--text-color: var(--white-100);
	/* --layout-spacing: max(4rem, calc(5 * var(--su))); */
	--stat-line: var(--primary-80);
}

.flex-layout.statistics .stats-list {
	display: flex;
	min-height: 70dvh;
}

.flex-layout.statistics .stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-inline: max(1.5rem, calc(2.5 * var(--su)));
	border-right: 1px solid var(--stat-line);
}

.flex-layout.statistics .stat:first-child {
	border-left: 1px solid var(--stat-line);
}

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

.flex-layout.statistics .pk-text {
	font-size: var(--body-m-regular);
}

/* Het getal loopt mee omhoog tot 85vh en blijft daar hangen zolang de kolom
   nog doorloopt. */
.flex-layout.statistics .stat-value {
	margin-top: max(1rem, calc(2 * var(--su)));
	margin-bottom: 0;
	position: sticky;
	top: 85vh;
	white-space: nowrap;
	font-family: var(--pk-heading-font-family);
	font-weight: 300;
	line-height: var(--pk-heading-line-height);
	font-size: max(2.5rem, calc(4 * var(--su)));
	letter-spacing: -0.02em;
	display: inline-flex;
}

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

	.flex-layout.statistics .stats-list {
		flex-direction: column;
		min-height: unset;
	}

	.flex-layout.statistics .stat {
		padding-inline: 0;
		padding-block: max(1.5rem, calc(1.5 * var(--su)));
		border-right: 0;
		border-top: 1px solid var(--stat-line);
	}

	.flex-layout.statistics .stat:first-child {
		border-left: 0;
	}

	.flex-layout.statistics .stat:last-child {
		border-bottom: 1px solid var(--stat-line);
	}

	.flex-layout.statistics .stat-value {
		position: static;
		margin-top: max(1rem, calc(1 * var(--su)));
	}

}