/**
* Hero Block Styles
*/
.hero-block-img {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-title,
.hero-subtitle {
    color: var(--text-color);
}

.hero-content {
    background: #fff;
}

.hero-button-title {
    color: var(--primary);
}

.hero-button-content {
    color: var(--text-color);
}

.hero-button-content p {
    margin-bottom: 0;
}

.hero-button-card {
    border: 1px solid var(--primary);
}

.hero--centered .hero-content {
    display: flex;
    align-items: center;
    /* verticaal */
    justify-content: center;
    /* horizontaal */
    min-height: 100%;
}

.hero--centered .hero-content>.d-flex {
    align-items: center;
    text-align: center;
}

.hero--centered .hero-buttons {
    justify-content: center;
}

.hero-block-img {
    position: relative;
    /* nodig voor video */
}

.hero-video-block {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



@media (min-width: 992px) {
    .hero-video-block {
        aspect-ratio: 21 / 9;
    }
}


@media (min-width: 1200px) {



    .hero-content {
        position: absolute;
        inset: 0;
        background: none;
        z-index: 2;
        padding-bottom: 3rem;
        padding-top: 3rem;
    }

    .hero-title,
    .hero-subtitle {
        color: unset;
    }

    .hero-button-card {
        border: none;
    }


}