@use '../helpers/functions' as *;
@use '../mixins/marquee' as marquee;

.carousel {
  padding-top: $spacer * 4;
  background-color: $neutral-94;

  .carousel__photos {
    @include marquee.base(240px, 460px, 10, 10, 15px, transparent, false, 50s, none);

    &__item {
      border-radius: pxToRem(4);
      overflow: hidden;
    }
  }

  @include media-breakpoint-up(md) {
    .carousel__photos {
      @include marquee.base(360px, 660px, 10, 10, 15px, transparent, false, 50s, none);
    }
  }
}