.hero-carousel-root {
    width:
        100%;
}

.hero-carousel {
    position:
        relative;

    width:
        100%;

    height:
        var(
            --hero-desktop-height,
            560px
        );

    overflow:
        hidden;

    background:
        #111827;
}

.hero-carousel-track {
    position:
        relative;

    width:
        100%;

    height:
        100%;
}

.hero-slide {
    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .5s ease,
        visibility .5s ease;
}

.hero-slide.is-active {
    z-index:
        2;

    opacity:
        1;

    visibility:
        visible;
}

.hero-slide picture,
.hero-slide-image {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;
}

.hero-slide-image {
    object-fit:
        cover;

    object-position:
        var(
            --hero-position-desktop,
            center center
        );
}

.hero-slide-overlay {
    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    background:
        var(
            --hero-overlay-color,
            #000
        );

    opacity:
        var(
            --hero-overlay-opacity,
            .2
        );

    pointer-events:
        none;
}

.hero-slide-container {
    position:
        relative;

    z-index:
        3;

    width:
        min(
            1180px,
            calc(
                100%
                - 48px
            )
        );

    height:
        100%;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;
}

.hero-slide-content {
    width:
        min(
            620px,
            100%
        );
}

.hero-align-left {
    margin-right:
        auto;

    text-align:
        left;
}

.hero-align-center {
    margin:
        0 auto;

    text-align:
        center;
}

.hero-align-right {
    margin-left:
        auto;

    text-align:
        right;
}

.hero-slide-kicker {
    margin-bottom:
        13px;

    color:
        var(
            --hero-title1-color,
            #fff
        );

    font-size:
        var(
            --hero-title1-size-desktop,
            16px
        );

    font-weight:
        800;

    letter-spacing:
        .03em;
}

.hero-slide-title {
    margin:
        0;

    color:
        var(
            --hero-title-color,
            #fff
        );

    font-size:
        var(
            --hero-title-size-desktop,
            48px
        );

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -.035em;

    white-space:
        pre-line;
}

.hero-slide-subtext {
    margin:
        19px 0 0;

    color:
        var(
            --hero-subtext-color,
            #fff
        );

    font-size:
        var(
            --hero-subtext-size-desktop,
            20px
        );

    line-height:
        1.45;

    white-space:
        pre-line;
}

.hero-slide-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    margin-top:
        26px;

    padding:
        0 24px;

    border-radius:
        9px;

    background:
        var(
            --hero-button-bg,
            #fff
        );

    color:
        var(
            --hero-button-text,
            #111827
        );

    font-size:
        var(
            --hero-button-size-desktop,
            16px
        );

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        transform .15s ease,
        opacity .15s ease;
}

.hero-slide-button:hover {
    transform:
        translateY(-1px);

    opacity:
        .94;
}

.hero-carousel-arrow {
    position:
        absolute;

    z-index:
        5;

    top:
        50%;

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    transform:
        translateY(-50%);

    border:
        1px solid rgba(255,255,255,.4);

    border-radius:
        50%;

    background:
        rgba(0,0,0,.28);

    color:
        #fff;

    font-size:
        27px;

    line-height:
        1;

    cursor:
        pointer;

    backdrop-filter:
        blur(6px);
}

.hero-carousel-prev {
    left:
        18px;
}

.hero-carousel-next {
    right:
        18px;
}

.hero-carousel-dots {
    position:
        absolute;

    z-index:
        5;

    left:
        50%;

    bottom:
        18px;

    display:
        flex;

    gap:
        8px;

    transform:
        translateX(-50%);
}

.hero-carousel-dot {
    width:
        10px;

    height:
        10px;

    padding:
        0;

    border:
        1px solid rgba(255,255,255,.8);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.35);

    cursor:
        pointer;

    transition:
        width .2s ease,
        background .2s ease;
}

.hero-carousel-dot.is-active {
    width:
        28px;

    background:
        #fff;
}

@media(max-width:767px) {

    .hero-carousel {
        height:
            var(
                --hero-mobile-height,
                460px
            );
    }

    .hero-slide-image {
        object-position:
            var(
                --hero-position-mobile,
                center center
            );
    }

    .hero-slide-container {
        width:
            calc(
                100%
                - 36px
            );
    }

    .hero-slide-title {
        font-size:
            var(
                --hero-title-size-mobile,
                32px
            );

        line-height:
            1.08;
    }

    .hero-slide-kicker {
        font-size:
            var(
                --hero-title1-size-mobile,
                14px
            );
    }

    .hero-slide-subtext {
        margin-top:
            14px;

        font-size:
            var(
                --hero-subtext-size-mobile,
                17px
            );
    }

    .hero-slide-button {
        min-height:
            47px;

        margin-top:
            20px;

        padding:
            0 20px;

        font-size:
            var(
                --hero-button-size-mobile,
                15px
            );
    }

    .hero-carousel-arrow {
        width:
            38px;

        height:
            38px;

        font-size:
            23px;
    }

    .hero-carousel-prev {
        left:
            8px;
    }

    .hero-carousel-next {
        right:
            8px;
    }

    .hero-carousel-dots {
        bottom:
            12px;
    }

}

@media(
    prefers-reduced-motion:
    reduce
) {

    .hero-slide {
        transition:
            none;
    }

}