Как реальзовать слайдер с затемнением элементов на основе slick-slider?

Пытаюсь сверстать макет сайта и дошёл до секции со слайдером на макете она выглядит следующим образом:

Решил использовать slick-slider но никак не могу понять как можно реализовать то чтобы следующий и предыдущий элементы отображались как на макете. Пробовал отображать по 3 слайда но не получается выделить уникальный селектор у центрального слайда чтобы на остальные наложить соответствующий css класс, пробовал рулить свойством centerPadding но тоже особых успехов не добился, может быть кто-то сталкивался с подобной задачей или знает направление в котором двигаться для её решения?

JS:

$(document).ready(()=>{
    $('.carousel').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
    });
  })

CSS/SASS:

.slick-slide
.slick-active + .slick-active ~ .slick-active
  display: block
  padding: 150px 15px
  background: #222
  color: #fff
  border-radius: 10px
  
  transform: scale(.9)
  opacity: 0.7
  
  transition: .5s ease 


.slick-active + .slick-active
  transform: scale(1)
  opacity: 1

HTML:

    <div class="carousel__slide">
        <img src="img/t1.png" alt="t1png" class="sl__img">
        <div class="sl__text">
            <h3 class="sl__zag">Анисимова Ольга</h3>
            <p class="sl__desc">Хочу рассказать о компании Global Opt. Самое главное что меня радует, это быстрый поиск и анализ определенного товара. Доставляла через компанию уже много раз, от расходных материалов для отеля, ло дольших партий детской одежды. Буду продолжать пользтваьбся услугами даной компании</p>
        </div>
    </div>
    <div class="carousel__slide">
        <img src="img/t1.png" alt="t1png" class="sl__img">
        <div class="sl__text">
            <h3 class="sl__zag">Анисимова Ольга</h3>
            <p class="sl__desc">Хочу рассказать о компании Global Opt. Самое главное что меня радует, это быстрый поиск и анализ определенного товара. Доставляла через компанию уже много раз, от расходных материалов для отеля, ло дольших партий детской одежды. Буду продолжать пользтваьбся услугами даной компании</p>
        </div>
    </div>
    <div class="carousel__slide">
        <img src="img/t1.png" alt="t1png" class="sl__img">
        <div class="sl__text">
            <h3 class="sl__zag">Анисимова Ольга</h3>
            <p class="sl__desc">Хочу рассказать о компании Global Opt. Самое главное что меня радует, это быстрый поиск и анализ определенного товара. Доставляла через компанию уже много раз, от расходных материалов для отеля, ло дольших партий детской одежды. Буду продолжать пользтваьбся услугами даной компании</p>
        </div>
    </div>
  </div>

Так же я в начале в html файле, перед head подключил

а в конце перед закрывающимся тегом подключил скрипты

Все ли я правильно сделал?

Вот что в итоге у меня получается, вроде все ошибки исправил