.flex-layout.proces-layout {
	--proces-border-color: var(--gijs-zwart);
	--proces-item-inset: max(0.875rem, calc(1 * var(--su)));
	--proces-image-radius: max(0.5rem, calc(0.5 * var(--su)));
	--proces-ratio-1: 5 / 4;
	--proces-ratio-2: 5 / 4;
	--proces-ratio-3: 12 / 11;
}

.flex-layout.proces-layout .proces-header {
	align-items: end;
	row-gap: max(1.5rem, calc(2 * var(--su)));
	margin-block-end: max(2.5rem, calc(4 * var(--su)));
}

.flex-layout.proces-layout .proces-titel > *:last-child {
	margin-bottom: 0;
}

.flex-layout.proces-layout .proces-knop {
	display: flex;
	justify-content: flex-end;
}

.flex-layout.proces-layout .proces-items {
	align-items: stretch;
	row-gap: max(2.5rem, calc(3 * var(--su)));
}

.flex-layout.proces-layout .proces-item {
	display: flex;
	flex-direction: column;
	border-inline-start: 1px solid var(--proces-border-color);
	padding-inline-start: var(--proces-item-inset);
}

.flex-layout.proces-layout .item-tekst {
	margin-block-end: max(2rem, calc(2.5 * var(--su)));
}

.flex-layout.proces-layout .item-tekst > *:last-child {
	margin-bottom: 0;
}

.flex-layout.proces-layout .item-image {
	position: relative;
	margin: auto 0 0;
	overflow: hidden;
	border-radius: var(--proces-image-radius);
}

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

.flex-layout.proces-layout .proces-item--1 .item-image {
	aspect-ratio: var(--proces-ratio-1);
}

.flex-layout.proces-layout .proces-item--2 .item-image {
	aspect-ratio: var(--proces-ratio-2);
}

.flex-layout.proces-layout .proces-item--3 .item-image {
	aspect-ratio: var(--proces-ratio-3);
}

.flex-layout.proces-layout .item-image-titel {
	position: absolute;
	inset-inline: max(1rem, calc(1.5 * var(--su)));
	inset-block-end: max(1rem, calc(1.5 * var(--su)));
	text-align: center;
	color: var(--gijs-wit);
	font-family: var(--pk-heading-font-family);
	font-size:  max(1.56rem, calc(2.1875 * var(--su)));
	line-height: var(--pk-heading-line-height);
}

@media screen and (max-width: 992px) {
	.flex-layout.proces-layout .proces-item--1 .item-image,
	.flex-layout.proces-layout .proces-item--2 .item-image {
		aspect-ratio: var(--proces-ratio-2);
	}

	.flex-layout.proces-layout .proces-item--3 .item-image {
		aspect-ratio: 16 / 9;
	}
}

@media screen and (max-width: 767px) {
	.flex-layout.proces-layout .proces-knop {
		justify-content: flex-start;
	}

	.flex-layout.proces-layout .item-image {
		order: -1;
	}

	.flex-layout.proces-layout .item-tekst {
		margin-block-start: max(1.5rem, calc(1.5 * var(--su)));
		margin-block-end: 0;
	}

	.flex-layout.proces-layout .proces-item--1 .item-image,
	.flex-layout.proces-layout .proces-item--2 .item-image {
		aspect-ratio: auto;
		height: max(13.75rem, calc(13.75 * var(--su)));
	}

	.flex-layout.proces-layout .proces-item--3 .item-image {
		aspect-ratio: var(--proces-ratio-2);
	}
}