.hero_punten-layout {
	margin-block: 0;
}
.hero_punten-layout .pk-grid-container {
	align-items: center;
}

.hero_punten-layout .breadcrumb-col {
	margin-bottom: max(2rem, calc(5 * var(--su)));
}

.hero_punten-layout .image-col {
	position: relative;
}
.hero_punten-layout .image-col::before {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 2;
	width: max(2.5rem, calc(2.5 * var(--su)));
	aspect-ratio: 1;
	display: block;
	background-color: var(--pink);
}
.hero_punten-layout .image-col img {
	position: relative;
	z-index: 1;
	aspect-ratio: 15/19;
	max-height: max(500px, calc(100vh - (var(--pk-header-height, 120px) + 100px)));
	width: 100%;
	object-fit: cover;
}

.hero_punten-layout .content-col .pk-text {
	font-size: var(--desktop-body-lg);
}
.hero_punten-layout .content-col .pk-text + .pk-punten {
	margin-top: max(1.5rem, calc(1.5 * var(--su)));
}
.hero_punten-layout .content-col .punten-title {
	margin-top: max(1.5rem, calc(2 * var(--su)));
	font-weight: 700;
	font-size: var(--desktop-body-sm);
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.hero_punten-layout .content-col .pk-punten {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: max(1.5rem, calc(2 * var(--su)));
	font-size: var(--desktop-body-md);
}
.hero_punten-layout .content-col .pk-punten .punt {
	display: flex;
	align-items: start;
	gap: 0.75rem;
}
.hero_punten-layout .content-col .pk-punten .punt .material-symbols-outlined {
	flex-shrink: 0;
}
.hero_punten-layout .content-col .pk-button-group {
	margin-top: max(1.5rem, calc(2 * var(--su)));
}

@media screen and (min-width: 993px) {
	.hero_punten-layout .content-col {
		padding-right: 5%;
	}

	.hero_punten-layout.mode-left .content-col {
		order: 2; padding-right: 0; padding-left: 5%;
	}
	.hero_punten-layout.mode-left .image-col {
		order: 1;
	}
	.hero_punten-layout.mode-left .image-col::before {
		right: auto;
		left: 0;
	}
	
	.hero_punten-layout .content-col .pk-text {
		max-width: 65%;
	}
}

@media screen and (min-width: 768px) and (max-width: 992px) {
	.hero_punten-layout .image-col {
		margin-top: 2rem;
	}
}