.flex-layout.archive_actualities {
	--bg-color: var(--neutral-50);
	--text-color: var(--primary-100);
	--layout-spacing-top: max(4rem, calc(4 * var(--su)));
	--layout-spacing-bottom: max(4rem, calc(6 * var(--su)));
}

.flex-layout.archive_actualities .filters-row {
	margin-bottom: max(1.5rem, calc(1.5 * var(--su)));
}

.flex-layout.archive_actualities .filters-col {
	display: flex;
	justify-content: flex-end;
}

.flex-layout.archive_actualities .image-stack {
	aspect-ratio: 654/580;
}

.flex-layout.archive_actualities .image-layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 400ms ease;
}

.flex-layout.archive_actualities .image-layer.is-visible {
	opacity: 1;
}

.flex-layout.archive_actualities .image-layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flex-layout.archive_actualities .actualities-list {
	display: flex;
	flex-direction: column;
	gap: max(1rem, calc(1 * var(--su)));
}

.flex-layout.archive_actualities .actuality-item.is-hidden {
	display: none;
}

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

	.flex-layout.archive_actualities .filters-col {
		justify-content: flex-start;
	}

	/* Zonder sticky kolom heeft de afbeelding geen functie meer. */
	.flex-layout.archive_actualities .image-col {
		display: none;
	}

	.flex-layout.archive_actualities .content-row {
		row-gap: max(1.5rem, calc(1.5 * var(--su)));
	}

}

/* Op grote schermen zou de verhouding de afbeelding hoger maken dan het scherm.
   De afbeelding staat op cover, dus het overflow wordt gewoon bijgesneden. */
@media screen and (min-width: 992px) and (max-height: 900px) {

	.flex-layout.archive_actualities .image-stack {
		height: 100%;
		aspect-ratio: unset;
		max-height: calc(85vh - var(--pk-header-height, 0px));
	}

}