.stills-carousel { position: relative; margin-top: 6px; }
.stills-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 6px;
  cursor: grab;
  outline: none;
}
.stills-track::-webkit-scrollbar { display: none; }
.stills-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.still-slide {
  flex: 0 0 auto;
  width: min(62vw, 300px);
  scroll-snap-align: start;
  margin: 0;
}
.still-slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #000;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.still-slide figcaption {
  margin-top: 6px;
  font-size: .78rem;
  color: var(--text-2);
  text-align: center;
}
.stills-nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 38px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(20, 22, 26, .74);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding-bottom: 4px;
}
.stills-nav:disabled { opacity: .3; cursor: default; }
.stills-prev { left: -8px; }
.stills-next { right: -8px; }
@media (min-width: 768px) {
  .stills-nav { display: flex; }
}
.stills-counter {
  text-align: center;
  font-size: .82rem;
  color: var(--text-2);
  margin: 10px 0 0;
}