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

/* margins for overflowing cards */
.carouselWrapper {
  overflow-x: 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);
  }
}

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

.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;
  }
}

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

/* Ensures 3 full cards at the large breakpoint. Cards scale after this point to maintain 4 column width per Card (3 full cards in view) */
@media (--arc-custom-media-min-width-l-px) {
  .cardWrapperCarousel {
    width: 100%;
    padding: 6px;
    margin-right: 0;
  }
}

.lastCard {
  margin-right: 0;
}