.hero-image-block {
    width: 100%;
}

.hero-image-block img,
.hero-image-block video {
    display: block;
    width: 100%;
    height: auto;
}

.hero-image-block.h-full,
.hero-image-block.h-half {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hero-image-block.h-full > img,
.hero-image-block.h-full > video,
.hero-image-block.h-full > .hero-image-mobile-fallback,
.hero-image-block.h-half > img,
.hero-image-block.h-half > video,
.hero-image-block.h-half > .hero-image-mobile-fallback {
    height: 100% !important;
    object-fit: cover;
    width: 100%;
}

.hero-image-block.h-full {
    height: 100vh;
}
@media (max-width: 768px) {
    .hero-image-block.h-full {
        height: 93vh;
    }
}

.hero-image-block.h-half {
    height: 45vh;
}

.hero-image-block.has-video {
    position: relative;
}

.video-mute-button {
    position: absolute;
    bottom: 4rem;
    left: clamp(1rem, 4vw, 20vw);
    z-index: 10;
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.hero-cta-button {
    position: absolute;
    bottom: 4rem;
    left: calc(clamp(1rem, 4vw, 20vw) + 44px + 8px);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    background-color: #ffffff;
    color: #e50000;
    border: none;
    border-radius: 0;
    text-decoration: none;
    padding: 0 24px;
    height: 44px;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, left 0.2s ease, transform 0.2s ease;
}

.hero-cta-button.is-centered {
    left: 50%;
    transform: translateX(-50%);
}

.hero-cta-button__text {
    position: relative;
    top: -2px;
}

.hero-cta-button:hover {
    background-color: #f1f1f1;
    color: #333;
}

.video-mute-button:hover {
    background-color: #f1f1f1;
}

.video-mute-button:hover svg {
    fill: #333;
}

.video-mute-button:focus,
.video-mute-button:active {
    background-color: #ffffff;
    outline: none;
    box-shadow: none;
}

.video-mute-button span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.video-mute-button svg {
    width: 22px;
    height: 22px;
    fill: #e50000;
    transition: fill 0.2s ease;
}

.video-mute-button .icon-unmuted {
    display: none;
}

.video-mute-button.is-unmuted .icon-unmuted {
    display: flex;
}

.video-mute-button.is-unmuted .icon-muted {
    display: none;
}

.hero-image-block .show-on-mobile {
    display: none;
}

@media (max-width: 768px) {
    .hero-image-block .hide-on-mobile {
        display: none;
    }

    .hero-image-block .show-on-mobile {
        display: block;
    }

    .video-mute-button,
    .hero-cta-button {
        bottom: 2rem;
    }

    .video-mute-button {
        left: 1rem;
    }

    .hero-cta-button {
        left: calc(1rem + 44px + 8px);
    }
    
    .hero-image-block.mobile-pos-top > img,
    .hero-image-block.mobile-pos-top > video,
    .hero-image-block.mobile-pos-top > .hero-image-mobile-fallback {
        object-position: top;
    }

    .hero-image-block.mobile-pos-center > img,
    .hero-image-block.mobile-pos-center > video,
    .hero-image-block.mobile-pos-center > .hero-image-mobile-fallback {
        object-position: center;
    }

    .hero-image-block.mobile-pos-left > img,
    .hero-image-block.mobile-pos-left > video,
    .hero-image-block.mobile-pos-left > .hero-image-mobile-fallback {
        object-position: left;
    }

    .hero-image-block.mobile-pos-right > img,
    .hero-image-block.mobile-pos-right > video,
    .hero-image-block.mobile-pos-right > .hero-image-mobile-fallback {
        object-position: right;
    }

    .hero-image-block.has-mobile-image-fallback .video-mute-button {
        display: none;
    }
}