.main_hero-layout {
    margin-top: 0;
	position: relative;
	color: #ffffff;
	overflow: hidden;
	/*min-height: calc(100vh - 80px);*/
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
    aspect-ratio: 1.46;
}

.main_hero-layout[data-theme="bruin"]{
    --theme: var(--bruin);
}
.main_hero-layout[data-theme="paars"]{
    --theme: var(--knalpaars);
}
.main_hero-layout[data-theme="geel"]{
    --theme: var(--botergeel);
    color: var(--bruin);
}

.main_hero-layout::before{
    content: '';
    position: absolute;
    width: 100%; height: 50%;
    top: 0; left: 0;
    background-color: var(--theme);
}

.main_hero-layout .hero-bg {
    isolation: isolate;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
    --mask-url: url("/wp-content/uploads/2026/06/hero_mask.svg");
    mask: var(--mask-url) no-repeat center / contain;
    -webkit-mask: var(--mask-url) no-repeat center / contain;
}

.main_hero-layout .hero-bg video {
    object-fit: cover;
    width: 100%; height: 100%;
}

.main_hero-layout .hero-bg > div{
    height: 100%;
}
.main_hero-layout .hero-bg iframe {
    position: absolute;
    object-fit: cover;
    scale: 1.3;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    border: none;
    pointer-events: none;
}

.main_hero-layout .hero-bg::before {
	content: ''; position: absolute; inset: 0; z-index: 10;
	background-color: rgba(0, 0, 0, .2);
}
.main_hero-layout .pk-row {
	position: relative; z-index: 10;
}

.main_hero-layout .pk-module.pk-content{
    gap: 0;
}

.main_hero-layout .pk-module.pk-content .pk-text{
    margin-bottom: max(1.25rem, calc(1.25 * var(--su)));
    line-height: 1.2;
    font-size: var(--desktop-body-intro);
}

.main_hero-layout h1{
	color: #ffffff;
    margin-bottom: 0;
    line-height: 1;
}

.main_hero-layout h1 .pk-heading-text span{
    position: relative;
    display: block;
    text-indent: 1.2125em;
}

.main_hero-layout h1 .pk-heading-text span::before,
.main_hero-layout h1 .pk-heading-text span::after{
    content: '';
    width: 200vw;
    height: 2px;
    background-color: var(--botergeel);
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
}

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

    .main_hero-layout {
        aspect-ratio: unset;
    }

    .main_hero-layout .hero-bg{
        mask: unset;
        -webkit-mask: unset;
    }

    .main_hero-layout .hero-bg iframe{
        scale: 2.3;
    }

	.main_hero-layout .read-more {
		bottom: max(1rem, calc(1 * var(--su))); right: max(1rem, calc(1 * var(--su)));
	}
}