.hero_secundair-layout {
    position: relative;
    color: #ffffff;
    overflow: hidden;
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

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

.hero_secundair-layout {
    padding: var(--pk-site-gutter);
    color: var(--bies-brown-dark);
    min-height: calc(100vh - (2 * var(--hero-frame)));
    justify-content: center;
}

/* Illus left corner */
.hero_secundair-layout .hero-corner_illu {
    position: absolute;
		max-width: max(10.938rem, calc(10.938 * var(--su)));
    top: max(2rem, calc(2.25 * var(--su)));
    left: 0;
}

.hero_secundair-layout  .hero-corner_illu svg{
	width: fit-content;
	height: fit-content;
}

.hero_secundair-layout .hero-inner_wrap {
    position: relative;
    border-radius: max(1rem, calc(1.5 * var(--su)));
}

.hero_secundair-layout .hero-content{
	padding-inline: max(1.25rem, calc(3.75 * var(--su))) 0;
}

/* Achtergrond stijl varianten (ACF: achtergrond_stijl) */
.hero_secundair-layout.hero-bg-roze {
    color: var(--primary-color);
}

.hero_secundair-layout.hero-bg-roze .hero-inner_wrap {
    background-color: var(--bies-salmon);
}

.hero_secundair-layout.hero-bg-blauw {
    color: var(--bies-peach-light);
}

.hero_secundair-layout.hero-bg-blauw .hero-inner_wrap {
    background-color: var(--secondary-color);
}

.hero_secundair-layout .pk-row-content {
    align-items: flex-end;
	margin-top: max(2rem, calc(2 * var(--su)));;
}

.hero_secundair-layout .pk-col-left {
    margin-bottom: max(2rem, calc(4 * var(--su)));
}

.hero_secundair-layout .pk-text{
	font-weight: 600;
	font-size: var(--scaling-h3);
}

.hero_secundair-layout .pk-button-group {
    margin-top: max(2rem, calc(2 * var(--su)));
}

.hero_secundair-layout.hero-bg-roze .pk-button-group .pk-button {
	color: var(--bies-salmon);
	border-color: var(--primary-color);
	background:  var(--primary-color);
}

.hero_secundair-layout.hero-bg-blauw .pk-button-group .pk-button {
	color: var(--secondary-color);
	border-color: var(--bies-peach-light);
	background: var(--bies-peach-light);
}

.hero_secundair-layout.hero-bg-blauw .pk-button-group .pk-button:nth-child(2) {
	color: var(--bies-peach-light);
	background: transparent;
}

.hero_secundair-layout.hero-bg-roze .pk-button-group .pk-button:nth-child(2) {
	color: var(--primary-color);
	background: transparent;
}


.hero_secundair-layout.hero-bg-blauw .pk-button svg path {
	fill: var(--secondary-color);
}

.hero_secundair-layout.hero-bg-roze .pk-button svg path {
	fill: var(--bies-salmon);
}

.hero_secundair-layout.hero-bg-blauw .pk-button:nth-child(2) svg path {
	fill: var(--bies-peach-light);
}

.hero_secundair-layout.hero-bg-roze .pk-button:nth-child(2) svg path {
	fill: var(--primary-color);
}

.hero_secundair-layout .hero-image {
    display: flex;
    justify-content: flex-end;
    padding-top: max(4rem, calc(6.25 * var(--su)));
}

.hero_secundair-layout .hero-image .hero-image-inner {
    flex-shrink: 0;
    flex: 1;
    max-width: max(36.25rem, calc(36.25 * var(--su)));
    width: 100%;
}

.hero_secundair-layout .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media screen and (min-width: 992px) {
	.hero_secundair-layout  .pk-row-content{
	margin-top: max(12rem, calc(12 * var(--su)));
	}
}

@media screen and (max-width: 1200px) {
	.hero_secundair-layout  .hero-corner_illu{
		max-width: max(8rem, calc(8 * var(--su)));
		top: 1rem;
	}

	.hero_secundair-layout .hero-content{
		padding-inline: max(1.25rem, calc(3.75 * var(--su)));
	}
}

@media screen and (max-width: 992px) {
    .hero_secundair-layout {
        min-height: auto;
    }
	
	.hero_secundair-layout .pk-row-content {
		margin-top: 0;
	}

    .hero_secundair-layout .hero-inner_wrap {
		padding-top:  max(6.25rem, calc(6.25 * var(--su)));
    }
	    .hero_secundair-layout .hero-corner_illu {
        display: none;
    }

	.hero_secundair-layout .hero-image {
    padding-top: max(1.5rem, calc(2 * var(--su)));
	}

	.hero_secundair-layout .hero-image .hero-image-inner{
		aspect-ratio: auto;
	}
	

	
}

@media screen and (max-width: 767px) {
	.hero_secundair-layout .hero-subtitle {
    margin-bottom: max(1.25rem, calc(1.25 * var(--su)));
}
}