.marquee {
  &.section {
  }
  &__slider {
    &-up {
      @include transform(translateY(50%) rotate(3deg));
      background: $color-2;

      @include breakpoint(max-lg) {
        @include transform(translateY(50%) rotate(5deg));
      }
      @include breakpoint(max-md) {
        @include transform(translateY(0) rotate(0deg));
      }
      .marquee-item {
        color: $color-5;
        h2 {
          color: inherit;
        }
      }
    }
    &-down {
      @include transform(translateY(-50%) rotate(-3deg));
      background: $color-primary;

      @include breakpoint(max-lg) {
        @include transform(translateY(-50%) rotate(-5deg));
      }
      @include breakpoint(max-md) {
        @include transform(translateY(0) rotate(0deg));
      }
      .marquee-item {
        color: $color-1;
        h2 {
          color: inherit;
        }
      }
    }

    .swiper-wrapper {
      @include add-prefix(transition-timing-function, linear !important);
    }
    .marquee-item {
      @extend %d-flex, %item-center;
      gap: 30px;
      width: auto;
      img,
      svg {
        @extend %shrink-0;
        width: 80px;
        height: 80px;
        @include breakpoint(max-xxl) {
          width: 70px;
          height: 70px;
        }
        @include breakpoint(max-xl) {
          width: 60px;
          height: 60px;
        }
        @include breakpoint(max-md) {
          width: 50px;
          height: 50px;
        }
        @include breakpoint(max-sm) {
          width: 40px;
          height: 40px;
        }
      }
    }
  }
}

.marquee__slider-common {
  background-color: $color-primary;
  padding: 10px 0;

  @include breakpoint(max-lg) {
    padding: 5px 0;
  }

  .swiper-wrapper {
    @include add-prefix(transition-timing-function, linear !important);
  }
  .marquee-item {
    @extend %d-flex, %item-center;
    color: $color-1;
    width: max-content;
    gap: 40px;

    @include breakpoint(max-lg) {
      gap: 30px;
    }
    @include breakpoint(max-md) {
      gap: 20px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: inherit;
    }
    svg,
    img {
      @include breakpoint(max-lg) {
        height: 40px;
      }
      @include breakpoint(max-sm) {
        height: 30px;
      }
    }
  }
}

.marquee2 {
  &.section {
    background-color: $color-primary;
    padding: 30px 0;

    @include breakpoint(max-lg) {
      padding: 25px 0;
    }
    @include breakpoint(max-md) {
      padding: 20px 0;
    }
    @include breakpoint(max-sm) {
      padding: 15px 0;
    }
  }
}
.marquee__slider-common2 {
  padding: 10px 0;

  @include breakpoint(max-lg) {
    padding: 5px 0;
  }

  .swiper-wrapper {
    @include add-prefix(transition-timing-function, linear !important);

    .marquee-item {
      width: max-content;
    }
  }
}
