*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f2f2f2;
    font-family:Arial, Helvetica, sans-serif;
}

.slider{

    position:relative;
    width:60%;
    height: 60%;
    max-width:1200px;
    margin:40px auto;
    overflow:hidden;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    touch-action:pan-y;
    cursor:grab;

}

.slider:active{

    cursor:grabbing;

}

.slides{

    display:flex;
    transition:transform .6s ease-in-out;

}

.slide{

    min-width:100%;
}

.slide img{
     width:100%;
    height:600px;
    object-fit:cover;
    user-select:none;
    pointer-events:none;

    
    /***
    
        width:100%;
        height:600px;
        object-fit:cover;
        display:block;
    
    
    
    **/


}

/* BOTONES */

.prev,
.next{

    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.5);
    color:#fff;
    font-size:28px;
    cursor:pointer;
    transition:.3s;

}

.prev:hover,
.next:hover{

    background:#2196F3;

}

.prev{

    left:15px;

}

.next{

    right:15px;

}

/* INDICADORES */

.dots{

    position:absolute;
    bottom:20px;
    width:100%;
    display:flex;
    justify-content:center;
    gap:10px;

}

.dot{

    width:14px;
    height:14px;
    border-radius:50%;
    background:white;
    opacity:.5;
    cursor:pointer;
    transition:.3s;

}

.dot.active{

    opacity:1;
    background:#2196F3;
    transform:scale(1.3);

}

/* RESPONSIVE */

@media(max-width:900px){

.slide img{

    height:450px;

}

}

@media(max-width:700px){

.slide img{

    height:320px;

}

.prev,
.next{

    width:45px;
    height:45px;
    font-size:22px;

}

}

@media(max-width:500px){
    .slider{

    position:relative;
    width:90%;
    }
.slide img{

    height:200px;

}

.prev,
.next{

    width:30px;
    height:30px;

}

}