.mira_hero_a1-layout {
    margin-top: 0;
    position: relative;
    color: #ffffff;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
	padding-block: max(4rem, calc(7 * var(--su)));

    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 96.43%,
        58.56% 89.07%,
        0% 100%
    );
}

.mira_hero_a1-layout .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.mira_hero_a1-layout::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.25);
}
.mira_hero_a1-layout .pk-col {
    position: relative;
    z-index: 1;
}

.mira_hero_a1-layout .pk-heading {
    color: inherit;
}

/* Kan dit niet beter door een component van de buttons te maken? */
.mira_hero_a1-layout .pk-button-group .pk-button:nth-child(2):not(:hover) {
    color: #ffffff;
    border-color: #ffffff;
}

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

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

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

    .mira_hero_a1-layout {
        min-height: unset;
    }
}