/* ==========================================
   HERO SLIDER
========================================== */


.hero-slider-section{

    width:93%;
    max-width:1500px;

    margin:100px auto 40px;

}



.hero-slider{

    position:relative;

    overflow:hidden;

    width:100%;

}



.hero-track{

    display:flex;

    gap:22px;

    transition:transform .45s ease;

    will-change:transform;

}



/* =========================
   SLIDES DESKTOP
========================= */


.hero-slide{

    flex:0 0 calc((100% - 44px) / 3);

    min-width:0;

    aspect-ratio:2 / 1;

    overflow:hidden;

    border-radius:28px;

    border:1px solid rgb(226,226,226);

    background:#fff;

}

.hero-slide img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}



/* =========================
   DOTS
========================= */


.hero-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:12px;

}



.hero-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#cfcfcf;

    cursor:pointer;

    transition:.25s;

}



.hero-dot.active{

    width:34px;

    border-radius:999px;

    background:#111;

}



/* стрелки выключены */

.hero-prev,
.hero-next{

    display:none;

}



/* =========================
   TABLET
========================= */


@media(max-width:1200px){


.hero-slide{

    flex:0 0 calc((100% - 22px) / 2);

}


}



/* =========================
   MOBILE
========================= */


@media(max-width:900px){


.hero-slider-section{

    width:95%;

    margin:95px auto 25px;

}



.hero-track{

    gap:0;

}



.hero-slide{

    flex:0 0 100%;

    aspect-ratio:2 / 1;

    border-radius:22px;

}

.hero-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.hero-dots{

    margin-top:12px;

}


}