/* BLOCK: Hero Banner Zoom */

.block-hero-banner-zoom {
    position: relative;
    height: 300vh;
    display: flex;
    align-items: flex-end;
}

body.scroll-lock .block-hero-banner-zoom {
    align-items: flex-start;
}

.block-hero-banner-zoom .bg-wrapper {
    position: sticky;
    bottom: 0;
    height: calc(200% / 3);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.block-hero-banner-zoom .bg-wrapper :is(picture, img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .block-hero-banner-zoom .bg-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(from var(--c-bg-lightest) r g b / 0.251) 0%, transparent 57.74%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.2) 4.3%, transparent 48.25%);
} */

.block-hero-banner-zoom .text-overlay {
    position: absolute;
    top: 50vh;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
    padding-inline: var(--page-padding);
}

.block-hero-banner-zoom .text-overlay :is(h6, .h6) {
    justify-content: center;
}

.block-hero-banner-zoom .text-content > :not(:last-child) {
    margin-bottom: 5rem;
}

.block-hero-banner-zoom .text-overlay .title {
    --fs: var(--font-220-90);
}

@media screen and (width <= 620px) {
    .block-hero-banner-zoom .bg-wrapper {
        height: 50%;
    }

    .block-hero-banner-zoom .text-overlay {
        top: 30vh;
    }

    .block-hero-banner-zoom .text-content > :not(:last-child) {
        margin-bottom: 3.125rem;
    }
}