.mira_hero_a1-layout {
    --button-border-color-2: #ffffff;
    --button-text-color-2: #ffffff;

    position: relative;
    color: #ffffff;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
}

.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: hsla(0, 0%, 0%, 0.25);
}
.mira_hero_a1-layout .pk-col {
    position: relative;
    z-index: 1;
    padding-block: calc(7 * var(--su));
}

.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: calc(2 * var(--su));
}

.mira_hero_a1-layout .pk-button-group{
    margin-bottom: calc(2 * var(--su));
}

/*
@media screen and (max-width: 992px) {
    .mira_hero_a1-layout .pk-row {
        padding-block: calc(7rem / 2);
    }
}

@media screen and (max-width: 767px) {
    .mira_hero_a1-layout .pk-row {
        padding-block: calc(7rem / 4);
    }

    .mira_hero_a1-layout .pk-text,
    .mira_hero_a1-layout .pk-button-group{
        margin-top: 1.5rem;
    }
}
*/