/* Simple responsive slider */
.slider-wrap{position:relative;margin:10px 0 16px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.slider{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch}
.slide{position:relative;min-width:100%;height:190px;scroll-snap-align:start;display:block}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.caption{position:absolute;left:14px;bottom:12px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);
  color:#fff;padding:8px 10px;border-radius:10px;font-weight:700;max-width:70%}

.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;border:none;border-radius:50%;
  width:38px;height:38px;background:rgba(16,24,35,.65);color:#fff;cursor:pointer}
.nav:hover{background:rgba(16,24,35,.85)}
.nav.prev{left:10px}.nav.next{right:10px}

.dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:6px;justify-content:center}
.dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.4);cursor:pointer}
.dots button.active{background:#fff}

@media(min-width:768px){ .slide{height:300px} }
@media(min-width:1100px){ .slide{height:380px} }