@custom-media --mobile (min-width: 45em);
@custom-media --tablet (min-width: 65em);
@custom-media --desktop (min-width: 85em);

.carouselWrapper {
  position: relative;
  display: subgrid !important;
}

.adaptiveCarousel {
  display: subgrid !important;
  &[data-carousel="true"] {
    padding-bottom: 2px;
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.inner {
  grid-column: 2 / 3;
  display: flex;
  flex-wrap: wrap;
  margin: 0 var(--grid-offset);
  overflow: visible;
}

.adaptiveCarousel[data-centered="true"] .inner {
  justify-content: center;
}

.adaptiveCarousel[data-carousel="true"] .inner {
  flex-wrap: nowrap;
  pointer-events: none;
  justify-content: flex-start;
}

.item {
  text-align: left;
  padding: var(--grid-gap);
}

.adaptiveCarousel:not([data-carousel="true"]) .item {
  @media (--mobile) {
    width: 50%;
  }
  @media (--tablet) {
    width: 33.3%;
  }
}
.adaptiveCarousel[data-size="default"]:not([data-carousel="true"]) .item {
  @media (--desktop) {
    width: 25%;
  }
}

.adaptiveCarousel[data-carousel="true"] .item > * {
  width: 70vw;
  max-width: 30rem;
}

.dummyItem {
  width: calc(var(--page-gutter) - var(--grid-gap));
  flex-shrink: 1;
  @media (--tablet) {
    flex-shrink: 0;
    padding: var(--grid-gap);
  }
}