.fizz-carousel {
  position: relative;
  max-width: calc(100vw - 47px);
}

.fizz-carousel > div {
  display: grid;
  grid-auto-columns: minmax(200px, 1fr);
  grid-auto-flow: column;
  gap: $spacing-16;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: $spacing-8;
}

.fizz-carousel > div > * {
  scroll-snap-align: start;
}

.fizz-carousel .fizz-prev-small,
.fizz-carousel .fizz-next-small {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

.fizz-carousel .fizz-prev-small {
  left: calc(-#{$spacing-32} - #{$spacing-4});
}

.fizz-carousel .fizz-next-small {
  right: calc(-#{$spacing-32} - #{$spacing-4});
}

.fizz-scroll-horizontal {
  overflow: auto;
}

.fizz-scroll-on-small {
  overflow: auto;
  padding-bottom: 8px;
}

.fizz-scroll-on-small > * {
  --width: 190px;
  width: var(--width);
  flex-shrink: 0;
}

@media (min-width: $breakpoint-m) {

  .fizz-carousel > div {
    grid-auto-columns: minmax(calc(25% - .75rem), 1fr);
  }

  .fizz-carousel .fizz-prev-small,
  .fizz-carousel .fizz-next-small {
    display: block;
  }

  .fizz-scroll-horizontal {
    margin-right: auto;
  }

  .fizz-scroll-on-small {
    padding-bottom: 0;
    overflow: visible;
  }
  
  .fizz-scroll-on-small > * {
    width: auto;
    flex-shrink: 1;
  }
}