.hero-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding: 2em 0 0;
}

.hero-background-image {
    bottom: 0;
    height: 100%;
    left: 0;
    object-fit: contain;
    object-position: 50% var(--position-y, top);
    position: relative;
    right: 0;
    top: 0;
    width: 100%;
}

.hero-background-image--cover {
    object-fit: cover;
}

.hero-inner {
    display: flex;
}

.hero-content {
    --max-width: 100%;

    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 2em 0;
    position: relative;
    max-width: var(--max-width);
    width: 100%;
    z-index: 1;
}

.hero-title {
    font-weight: 300;
    letter-spacing: 0.1em;
    margin: 0 !important;
    text-transform: uppercase;
}

.hero-description {
    margin: 0;
}

.hero_video .hero-video-vimeo.hero-background-image--cover {
    aspect-ratio: 16/9;
    width: auto;
    height: auto;
    min-height: 100%;
    min-width: 100%;
    pointer-events: none;
}

.hero_video .muteBtn {
    min-width: unset;
    padding: 0;
    border: none;
    background-color:transparent;
}

.hero_video .muteBtn:focus {
    outline: 1px solid white !important;
    outline-offset: 0;
}

.hero_video .muteBtn.isMutedBtn .hideIfMuted {
    display: none;
}

@media screen and (max-width: 768px) {
    .hero_video .hero-background-image-wrapper {
        position: relative;
    }
}

@media screen and (min-width: 769px) {
    .hero-wrapper {
        height: calc(100vh - var(--header-height) - var(--header-offset-height));
        padding: 4em 0 0;
    }

    .hero-background-image {
        position: absolute;
    }

    .hero-content {
        --max-width: 50%;

        backdrop-filter: blur(0.5em);
        background-color: rgba(54, 59, 68, 0.4);
        color: #fff;
        padding: 2em;
    }

    .hero--align-right .hero-inner {
        justify-content: flex-end;
    }

    .hero_video .hero-video-vimeo.hero-background-image--cover {
        top: 50%;
        left: 50%;
        bottom: unset;
        right: unset;
        transform: translate( -50%, -50% );
        height: 56.25vw;
        width: 177.77777778vh;
        max-width: unset;
    }

    .hero_video:has(.hero-video-vimeo.hero-background-image--cover) .hero-wrapper {
        overflow: hidden;
    }
}

@media screen and (min-width: 999px) {
    .hero-content {
        --max-width: 70ch;
        padding: 3em;
        gap: 2em;
    }
}