.banner-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.banner-track::-webkit-scrollbar { display: none; }
.banner-track > .banner-slide {
  position: relative;
  inset: auto;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.banner-track img { user-select: none; -webkit-user-drag: none; }
.banner-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.banner .banner-dot { position: relative; height: 24px; background: transparent; }
.banner .banner-dot::after {
  content: "";
  position: absolute;
  inset: 10px 0 11px;
  background: rgba(255,255,255,.35);
  transition: background .3s ease;
}
.banner .banner-dot.is-active::after { background: #fff; }