Promotion Carousel - ViacomCBS UI Kit

<div class="promotion-carousel carousel carousel--dark">
    <div class="promotion-carousel__inner">
        <div class="promotion-carousel__wrap js-promotion-carousel">
            <ul class="promotion-carousel__list js-promotion-cards">
                <li class="promotion-carousel__item promotion">
                    <a href="#" class="promotion__category">Category</a>
                    <a href="#" class="promotion__title"> Item 1 Lorem ipsum dolor sit amet consectetur adipisicing elit minima pariatur </a>
                    <div class="promotion__actions">
                        <a href="#" class="btn btn-link">
                            Lorem Ipsum
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </li>

                <li class="promotion-carousel__item promotion">
                    <a href="#" class="promotion__category">Category</a>
                    <a href="#" class="promotion__title"> Item 2 Lorem ipsum dolor sit amet consectetur adipisicing elit minima pariatur </a>
                    <div class="promotion__actions">
                        <a href="#" class="btn btn-link">
                            Lorem Ipsum
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </li>

                <li class="promotion-carousel__item promotion">
                    <a href="#" class="promotion__category">Category</a>
                    <a href="#" class="promotion__title"> Item 3 Lorem ipsum dolor sit amet consectetur adipisicing elit minima pariatur </a>
                    <div class="promotion__actions">
                        <a href="#" class="btn btn-link">
                            Lorem Ipsum
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </li>

                <li class="promotion-carousel__item promotion">
                    <a href="#" class="promotion__category">Category</a>
                    <a href="#" class="promotion__title"> Item 4 Lorem ipsum dolor sit amet consectetur adipisicing elit minima pariatur </a>
                    <div class="promotion__actions">
                        <a href="#" class="btn btn-link">
                            Lorem Ipsum
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </li>

                <li class="promotion-carousel__item promotion">
                    <a href="#" class="promotion__category">Category</a>
                    <a href="#" class="promotion__title"> Item 5 Lorem ipsum dolor sit amet consectetur adipisicing elit minima pariatur </a>
                    <div class="promotion__actions">
                        <a href="#" class="btn btn-link">
                            Lorem Ipsum
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </li>

                <li class="promotion-carousel__item promotion">
                    <a href="#" class="promotion__category">Category</a>
                    <a href="#" class="promotion__title"> Item 6 Lorem ipsum dolor sit amet consectetur adipisicing elit minima pariatur </a>
                    <div class="promotion__actions">
                        <a href="#" class="btn btn-link">
                            Lorem Ipsum
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </li>

                <li class="promotion-carousel__item promotion">
                    <a href="#" class="promotion__category">Category</a>
                    <a href="#" class="promotion__title"> Item 7 Lorem ipsum dolor sit amet consectetur adipisicing elit minima pariatur </a>
                    <div class="promotion__actions">
                        <a href="#" class="btn btn-link">
                            Lorem Ipsum
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </li>

                <li class="promotion-carousel__item promotion">
                    <a href="#" class="promotion__category">Category</a>
                    <a href="#" class="promotion__title"> Item 8 Lorem ipsum dolor sit amet consectetur adipisicing elit minima pariatur </a>
                    <div class="promotion__actions">
                        <a href="#" class="btn btn-link">
                            Lorem Ipsum
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </li>

                <li class="promotion-carousel__item promotion">
                    <a href="#" class="promotion__category">Category</a>
                    <a href="#" class="promotion__title"> Item 9 Lorem ipsum dolor sit amet consectetur adipisicing elit minima pariatur </a>
                    <div class="promotion__actions">
                        <a href="#" class="btn btn-link">
                            Lorem Ipsum
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

.promotion-carousel {
  background-color: $color-base-blue;
  color: $color-base-white;
  padding: 1.6rem 0;

  .promotion-carousel__inner {
    max-width: 1170px;
    margin: 0 auto;
  }

  .promotion-carousel__wrap {
    position: relative;
  }

  .promotion-carousel__list {
    list-style: none;
    padding-left: 0;
  }

  .promotion {
    position: relative;
    color: $color-base-white;
    width: 24rem;
    display: flex;
    flex-direction: column;
    padding: 2.4rem 2.4rem 4rem;
    border-left: 1px solid $color-base-white;
    border-right: 1px solid transparent;

    &:last-child {
      border-right-color: $color-base-white;
    }

    a:focus {
      outline: 0;
    }
  }

  .promotion__category {
    @include typeCaption;
    color: $color-blue-light;

    &:hover {
      color: $color-base-white;
    }
  }

  .promotion__title {
    @include typeBody(true);
    color: $color-base-white;

    &:hover {
      text-decoration: none;
      color: $color-blue-medium;
    }
  }

  .promotion__actions {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

$(document).ready(function () {
  $(".js-promotion-carousel").each(function () {
    const $carousel = $(this);
    const $cards = $carousel.find(".js-promotion-cards");

    $cards.slick({
      arrows: false,
      mobileFirst: true,
      centerMode: true,
      infinite: false,
      slidesToScroll: 1,
      slidesToShow: 1,
      responsive: [
        {
          breakpoint: 767,
          settings: {
            slidesToScroll: 2,
            slidesToShow: 2,
          },
        },
        {
          breakpoint: 1199,
          settings: {
            arrows: true,
            centerMode: false,
            slidesToScroll: 5,
            slidesToShow: 5,
          },
        },
      ],
    });
  });
});