.main-carousel {
  --sb-track-color: #232e33;
  --sb-thumb-color: #44697a;
  --sb-size: 10px;

  display: flex;
  gap: 10px;
  padding: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: var(--sb-size);
  scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
}

.main-carousel img,
.main-carousel iframe,
.main-carousel video {
  height: 240px;
  width: auto;
  object-fit: contain;
  vertical-align: bottom;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

@media (hover: hover) {
  .main-carousel::-webkit-scrollbar {
    height: var(--sb-size);
  }

  .main-carousel::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 3px;
  }

  .main-carousel::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;
  }
}