.flex-layout.human_stories_reference {
	--bg-color: var(--support-1);
	--text-color: var(--primary-100);
}

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

.flex-layout.human_stories_reference .image-col {
	position: relative;
	min-height: max(37.5rem, calc(37.5 * var(--su)));
}

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

	.flex-layout.human_stories_reference .image-col {
		max-height: calc(90svh - var(--pk-header-height));
	}

}

.flex-layout.human_stories_reference .human-stories-swiper,
.flex-layout.human_stories_reference .human-stories-swiper .swiper-wrapper,
.flex-layout.human_stories_reference .human-stories-swiper .swiper-slide {
	height: 100%;
}

.flex-layout.human_stories_reference .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flex-layout.human_stories_reference .human-stories-list {
	display: flex;
	flex-direction: column;
	gap: max(1rem, calc(1.5 * var(--su)));
	height: 100%;
}

/* De eigen ondergrens van de kaart telt hier niet; de rij bepaalt de hoogte. */
.flex-layout.human_stories_reference .human-stories-list .human-story-card {
	flex: 1;
	min-height: 0;
}

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

	.flex-layout.human_stories_reference .image-col {
		min-height: unset;
	}

	.flex-layout.human_stories_reference .swiper-slide img {
		aspect-ratio: 1;
		height: auto;
	}

	.flex-layout.human_stories_reference .human-stories-list {
		height: auto;
	}

	.flex-layout.human_stories_reference .human-stories-list .human-story-card {
		flex: 0 0 auto;
		height: auto;
	}

}