@use "../../../styles/int.scss";

.heading {
  margin: int.$spacing-2 0;
  color: int.$warmgray-70;

  @include int.overline();
}

.carousel-outer-container {
  width: 100%;
  position: relative;

  &.overflow {
    width: calc(100% + 2 * var(--ModuleContainer-card-padding));
    overflow-x: auto;
    margin-left: calc(-1 * var(--ModuleContainer-card-padding));
    padding-left: var(--ModuleContainer-card-padding);
  }
}

.carousel-inner-container {
  display: grid;
  gap: int.$spacing-4;

  @include int.container-at-least("xl") {
    gap: int.$spacing-5;
  }

  &.horizontal {
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
  }

  &.vertical {
    grid-template-columns: 1fr;
    gap: int.$spacing-4;
  }

  &.overflow {
    float: left;
    grid-auto-columns: 180px;
    grid-auto-flow: column;
    padding-right: var(--ModuleContainer-card-padding);

    @include int.container-at-least("sm") {
      grid-auto-columns: 225px;
    }
  }
}