body{
margin:0;
font-family:sans-serif;
}

.hero-slider{
position:relative;
width:100%;
height:70vh;
overflow:hidden;
}

.slides{
width:100%;
height:100%;
position:relative;
}

.slide{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity .6s ease;
will-change:opacity;
}

.slide.active{
opacity:1;
}

.nav{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,.5);
color:#fff;
border:none;
padding:10px 16px;
cursor:pointer;
font-size:24px;
z-index:5;
}

.prev{ left:20px }
.next{ right:20px }

.thumbnails{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:6px;
overflow-x:auto;
padding:6px;
}

.thumbnails img{
width:60px;
height:40px;
object-fit:cover;
opacity:.6;
cursor:pointer;
transition:.2s;
}

.thumbnails img.active{
opacity:1;
border:2px solid #fff;
}

@media(max-width:768px){

.hero-slider{
height:50vh;
}

.thumbnails img{
width:45px;
height:30px;
}

}