.gridContainer {
  display: grid;
  gap: 1.6rem;
}

.carousel {
  display: grid;
  grid-auto-columns: 80dvw;
  grid-auto-flow: column;
  gap: 1.6rem;

  margin-left: -1.6rem;
  margin-right: -1.6rem;
  padding-left: 1.6rem;

  overflow-x: scroll;
  scroll-padding-left: 1.6rem;
  scroll-snap-type: x mandatory;

  scrollbar-width: none;
  /* Hide scrollbar IE and Edge */
  -ms-overflow-style: none;
  /* Hide Scrollbar Firefox */
}

.carousel:last-child {
  margin-right: 1.6rem;
}

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

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

@media screen and (min-width: 1367px) {
  .twoColumnGrid,
  .twoPlusOne {
    grid-template-columns: repeat(2, 1fr);
  }

  .threeColumnGrid {
    grid-template-columns: repeat(3, 1fr);
  }

  .twoPlusOne > *:last-child {
    grid-column: span 2;
  }

  .carousel {
    grid-auto-flow: unset;
    margin: 0;
    padding: 0;
  }
}