/* ==========================
   Carousel
========================== */

.carousel{

    width:220px;
    margin:30px auto;

}

.carousel-window{

    width:100%;
    overflow:hidden;
    border-radius:22px;
    box-shadow:0 6px 16px rgba(0,0,0,.15);

}

.carousel-track{

    display:flex;
    transition:transform .35s ease;

}

.carousel-track img{

    width:100%;
    min-width:100%;
    height:auto;
    display:block;
    user-select:none;
    -webkit-user-drag:none;

}

.carousel-controls{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin-top:18px;

}

.carousel-btn{

    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#5f8966;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    transition:.2s;

}

.carousel-btn:hover{

    background:#4f7c54;

}

.carousel-btn:active{

    transform:scale(.95);

}

.carousel-dots{

    display:flex;
    align-items:center;
    gap:10px;

}

.dot{

    width:10px;
    height:10px;
    border-radius:50%;
    background:#cccccc;
    cursor:pointer;
    transition:.2s;

}

.dot.active{

    background:#5f8966;
    transform:scale(1.25);

}