.hero { position: relative; }
.hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide { flex: 0 0 100%; scroll-snap-align: start; }
.hero-slide img { width: 100%; aspect-ratio: 768 / 450; object-fit: cover; }

.section { margin-top: 22px; }
.section-title {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.12;
  color: #111;
  margin: 0 var(--gutter) 14px;
}

.shelf { position: relative; }
.shelf-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px var(--gutter) 12px;
}
.shelf-track::-webkit-scrollbar { display: none; }

.shelf-arrow { top: 38%; }
.shelf-arrow.car-arrow--prev { left: 3px; }
.shelf-arrow.car-arrow--next { right: 3px; }