/* Hero carousel */
#hero-carousel {
  display: flex;
  width: 100%;
  gap: 20px;
  padding: 25px 0 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

#hero-carousel::-webkit-scrollbar {
  display: none;
}

#hero-carousel.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.hero-carousel-slide {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
}

.hero-carousel-slide img {
  display: block;
  width: 100%;
  height: 560px;
  border-radius: 16px;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Dots */
#hero-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 10px 0 18px;
}

.hero-carousel-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #d9d9d9;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.hero-carousel-dot.is-active {
  background: #777777;
}

/* Arrows */
#hero-carousel-prev {
  left: 18px;
}

#hero-carousel-next {
  right: 18px;
}

/* Mobile */
@media (max-width: 767px) {
  #hero-carousel {
    box-sizing: border-box;
    gap: 12px;
    padding: 25px 16px 0;
    scroll-padding-inline: 16px;

    /*
      Do not use touch-action: pan-y here.
      Native horizontal scrolling needs to remain enabled.
    */
    touch-action: auto;
  }

  .hero-carousel-slide {
    flex-basis: 88%;
  }

  .hero-carousel-slide img {
    height: 260px;
    border-radius: 20px;
  }

  #hero-carousel-prev,
  #hero-carousel-next {
    display: none;
  }
}