@import url("@arc-ui/tokens-arc/dist/custom-media.css");

.PromoListing {
  max-width: 1280px;
}

/* margins for overflowing cards */
.CarouselWrapper {
  overflow: hidden;
  margin: 0 calc(-1 * var(--arc-size-section-margin-16));
  padding: 6px var(--arc-size-section-margin-16);
}

@media (--arc-custom-media-min-width-s-px) {
  .CarouselWrapper {
    margin: 0 calc(-1 * var(--arc-size-section-margin-24));
    padding: 6px var(--arc-size-section-margin-24);
  }
}

.carouselSlide {
  height: 100%;
  padding: 6px;
}

.cardGrid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cardWrapper {
  height: 100%;
}

.cardWrapper > * {
  height: 100%;
}

.cardWrapperCarousel {
  width: 288px;
  height: 100%;
  margin-right: 16px;
}

.cardWrapperCarousel > * {
  height: 100%;
}

@media (--arc-custom-media-min-width-s-px) {
  .cardWrapperCarousel {
    margin-right: 24px;
  }

  .cardGrid {
    gap: 24px;
  }

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

  .cardGrid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (--arc-custom-media-min-width-m-px) {
  .cardWrapperCarousel {
    width: 348px;
  }
}

@media (--arc-custom-media-min-width-l-px) {
  .cardGrid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .cardGrid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (--arc-custom-media-min-width-xl-px) {
  .cardGrid {
    gap: 32px;
  }
}