:root{
  --gap: 12px;
  --btn: 44px;
  --dot: 10px;
  --accent:#111;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

.carousel{max-width: 980px; margin: 20px auto; position:relative; padding-inline: 46px}
.c-viewport{overflow:hidden; border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.08)}

.c-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  gap:var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
}
.c-track::-webkit-scrollbar{display:none}

.c-slide{scroll-snap-align:start; position:relative; aspect-ratio:16/9; background:#f5f5f7}
.c-slide img{width:100%; height:100%; object-fit:cover; display:block}
.c-cap{position:absolute; inset:auto 0 0 0; padding:12px 14px; color:#fff;
       background:linear-gradient(180deg,transparent,rgba(0,0,0,.55)); font-size:14px}

/* arrows */
.c-btn{
  position:absolute; top:50%; translate:0 -50%; width:var(--btn); height:var(--btn);
  display:grid; place-items:center; border:0; border-radius:50%;
  background:rgba(255,255,255,.92); box-shadow:0 2px 10px rgba(0,0,0,.18);
  cursor:pointer;
}
.c-btn--prev{left:6px} .c-btn--next{right:6px}
.c-btn:focus-visible{outline:2px solid #4c9ffe}

/* dots */
.c-dots{display:flex; gap:8px; justify-content:center; margin:10px auto 0}
.c-dots button{width:var(--dot); height:var(--dot); border-radius:50%; border:0; background:#d0d0d4; cursor:pointer}
.c-dots button[aria-current="true"]{background:var(--accent)}

@media (min-width:900px){
  .c-slide{aspect-ratio:21/9}
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .c-track{scroll-behavior:auto}
}