.carousel {
  display: grid;
  grid-auto-columns: 350px;
  grid-auto-flow: column;
  gap: var(--Spacing-x2);
  margin-left: calc(0 - var(--Spacing-x2));
  margin-right: calc(0 - var(--Spacing-x2));
  overflow-x: scroll;
  scroll-padding-left: var(--Spacing-x2);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Hide scrollbar IE and Edge */
  -ms-overflow-style: none;
  /* Hide Scrollbar Firefox */
}

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

/* Hide Scrollbar Chrome, Safari and Opera */
.carousel::-webkit-scrollbar {
  display: none;
}

/* 3 cols + 2 gaps (+ padding) before falling back to scroll */
@media screen and (min-width: 964px) {
  .carousel {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media screen and (min-width: 1367px) {
  .carousel {
    margin: 0;
    padding: 0;
  }
}