.hero{
    padding:18px 0 22px;
    background:linear-gradient(180deg,#fff 0%,#fff 72%,#fafafa 100%);
    overflow:hidden;
}

.hero-slider{
    display:flex;
    transition:transform .65s ease;
    will-change:transform;
}

.hero-slide{
    flex:0 0 100%;
    min-width:100%;
    padding:0 0 18px;
}

.hero-banner-shell{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

.hero-image{
    width:100%;
}

.hero-banner-link{
    display:block;
    width:100%;
}

.hero-banner-link .hero-image{
    display:block;
    width:100%;
    max-width:none;
    transition:opacity .25s ease;
    animation:heroFloat 5.5s ease-in-out infinite;
    object-fit:cover;
}

.dots{
    text-align:center;
    margin-top:8px;
}

.dots span{
    width:8px;
    height:8px;
    display:inline-block;
    border-radius:50%;
    margin:0 4px;
    background:#d1d5db;
    cursor:pointer;
}

.dots .active{
    background:var(--r);
}

@keyframes heroFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}