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

.flex-layout.swiper_usecases .usecases-grid {
	position: relative;
	row-gap: max(1.5rem, calc(2.5 * var(--su)));
}

/* Panel vult de volledige grid-hoogte (titel t/m pagination) */
.flex-layout.swiper_usecases.boxed .panel {
	position: absolute;
	inset: 0;
	background-color: var(--neutral-90);
	z-index: 0;
}

.flex-layout.swiper_usecases.boxed .heading-col {
	padding-top: max(4rem, calc(4 * var(--su)));
}

.flex-layout.swiper_usecases.boxed .controls-col {
	padding-bottom: max(4rem, calc(4 * var(--su)));
}

.flex-layout.swiper_usecases .heading-col {
	grid-column: 1 / 13;
	position: relative;
	z-index: 1;
}

.flex-layout.swiper_usecases.boxed .heading-col {
	text-align: center;
}

.flex-layout.swiper_usecases .usecases-swiper {
	grid-column: 1 / 13;
	position: relative;
	z-index: 1;
	overflow: visible;
}

.flex-layout.swiper_usecases .swiper-slide {
	width: 75%;
	height: auto;
}

.flex-layout.swiper_usecases .controls-col {
	grid-column: 1 / 13;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: max(1rem, calc(1.5 * var(--su)));
}

.flex-layout.swiper_usecases .controls-col .nova-pagination {
	grid-column: 2;
}

.flex-layout.swiper_usecases .controls-col .pk-button-group {
	grid-column: 3;
	justify-self: end;
	margin: 0;
	padding-right: max(1.5rem, calc(3.75 * var(--su)));
}

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

	.flex-layout.swiper_usecases .heading-col .pk-text {
		max-width: max(50rem, calc(50 * var(--su)));
	}

}

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

	.flex-layout.swiper_usecases .controls-col {
		margin-top: max(1.5rem, calc(2 * var(--su)));
	}

}

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

	.flex-layout.swiper_usecases.boxed .panel {
		display: none;
	}

	.flex-layout.swiper_usecases.boxed .heading-col {
		padding-top: unset;
	}

	.flex-layout.swiper_usecases.boxed .controls-col {
		padding-bottom: unset;
	}

	.flex-layout.swiper_usecases .swiper-slide {
		width: 100%;
	}

	.flex-layout.swiper_usecases .controls-col {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.flex-layout.swiper_usecases .controls-col .nova-pagination,
	.flex-layout.swiper_usecases .controls-col .pk-button-group {
		grid-column: 1;
		justify-self: center;
	}

}