.view-section[data-view="home"] {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.view-section[data-view="home"] .home-banner-carousel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 18px 0 22px;
  overflow: hidden;
  box-sizing: border-box;
}

.view-section[data-view="home"] .home-banner-carousel-rail {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: 22px;
  background: #111217;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.view-section[data-view="home"] .home-banner-carousel-rail::-webkit-scrollbar {
  display: none;
}

.view-section[data-view="home"] .home-banner-carousel-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  aspect-ratio: 1200 / 358;
  min-height: 100px;
  max-height: 158px;
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  border-radius: 22px;
  background: #111217;
  isolation: isolate;
}

.view-section[data-view="home"] .home-banner-carousel-animation,
.view-section[data-view="home"] .home-banner-carousel-animation img,
.view-section[data-view="home"] .home-banner-carousel-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  background: #111217;
  pointer-events: none;
}

.view-section[data-view="home"] .home-banner-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  min-height: 5px;
  margin-top: 9px;
}

.view-section[data-view="home"] .home-banner-carousel-dots span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  transition: width 180ms ease, background-color 180ms ease;
}

.view-section[data-view="home"] .home-banner-carousel-dots span.is-active {
  width: 18px;
  background: rgba(255, 255, 255, 0.78);
}

body.backtest-mode .view-section[data-view="home"] .home-banner-carousel {
  display: none;
}

@media (max-width: 520px) {
  .view-section[data-view="home"] .home-banner-carousel {
    margin-top: 16px;
    margin-bottom: 20px;
  }

  .view-section[data-view="home"] .home-banner-carousel-rail,
  .view-section[data-view="home"] .home-banner-carousel-slide {
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-section[data-view="home"] .home-banner-carousel-rail {
    scroll-behavior: auto;
  }
}