/* Carousel 3 Items */
.carousel-3-items-wrapper {
  .carousel-3-items {
    position: relative;
    .carousel-inner {
      padding: 0;
    }
  }
  .carousel-control-prev,
  .carousel-control-next {
    width: 40px;
    justify-content: center;
    cursor: pointer;
    span, svg, .fa {
      font-size: rem-calc(30);
      color: $black;
    }
  }
  .lSSlideOuter {
    position: relative;
    overflow: visible;
    .lSSlideWrapper {
      position: static;
      margin-left: rem-calc(40);
      margin-right: rem-calc(40);
      .lSAction {
        a {
          width: rem-calc(20);
          height: (40);
          top: calc(50% - 25px);
          background: none;
          opacity: .5;
          text-decoration: none;
          &:before {
            color: $black;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            background: none;
            font-size: rem-calc(40);
          }
          &:hover {
            opacity: .9;
          }
        }
        .lSPrev {
          left: 4px;
          &:before {
            content: "\f104";
          }
        }
        .lSNext {
          right: 4px;
          &:before {
            content: "\f105";
          }
        }
      }
    }
    .lSPager.lSpg {
      li {
        padding: 0;
        &::before {
          display: none !important;
        }
      }
      li > a {
        width: 9px;
        height: 9px;
        border: 1px solid $primary-shade;
        background: transparent;
        border-radius: 100%;
        box-sizing: content-box;
        margin-right: 3px;
        margin-left: 3px;
      }
      li:hover a,
      li.active > a {
        border: 1px solid $secondary-shade;
        background: $secondary-shade;
      }
    }
  }
}

/* Carousel 2 Item 1 Rotate */
.carousel-2-item-1-rotate {
  position: relative;
  .carousel-inner {
    padding: 0;
  }
}
.carousel-2-item-1-rotate-wrapper {
  .carousel-controls {
    margin-top: rem-calc(32);
    display: flex;
    justify-content: flex-end;

    .carousel-control-prev,
    .carousel-control-next {
      position: relative;
      width: 40px;
      justify-content: center;
      cursor: pointer;

      span, svg, .fa {
        font-size: rem-calc(30);
        color: $black;
      }
    }
  }
  .lightSlider {
    overflow: visible;
    > div {
      padding: 0;
    }
  }
  .lSSlideOuter {
    .lSPager.lSpg {
      li {
        padding: 0;
        &::before {
          display: none !important;
        }
      }
      li > a {
        width: 9px;
        height: 9px;
        border: 1px solid $primary-shade;
        background: transparent;
        border-radius: 100%;
        box-sizing: content-box;
        margin-right: 3px;
        margin-left: 3px;
      }
      li:hover a,
      li.active > a {
        border: 1px solid $secondary-shade;
        background: $secondary-shade;
      }
    }
  }
}