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

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

.flex-layout.human_stories_archive_grid .stories-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: max(1.5rem, calc(1.5 * var(--su)));
}

.flex-layout.human_stories_archive_grid .pagination-row {
	margin-top: max(1.5rem, calc(3 * var(--su)));
}

/* Wrapper blijft in de DOM voor AJAX-paginering, maar reserveert geen ruimte zonder paginering. */
.flex-layout.human_stories_archive_grid .pagination-row:empty {
	margin-top: 0;
}

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

	.flex-layout.human_stories_archive_grid .stories-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

}

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

	.flex-layout.human_stories_archive_grid .stories-grid {
		grid-template-columns: minmax(0, 1fr);
	}

}

.flex-layout.human_stories_archive_grid .story-highlight-card {
	min-height: max(31.25rem, calc(31.25 * var(--su)));
}