Гладкий слайдер - можем ли мы сделать центр слайда намного больше?

Question

Есть ли способ сделать центральный слайдер намного больше, чем другие, с помощью гладкого слайдера.

Я много чего пробовал на нем в течение 4 дней (включая решение transform: scale, но этого не произошло соответствует требованиям), но не заставляет его работать плавно, поскольку, если я установлю ширину или поле для гладкого центра, ползунок будет "дергаться".

Это мой код: https://codepen.io/linhtruong101/pen/KKVeMWw

Любой совет будет очень признателен.

Заранее спасибо.

<! --- HTML --- >
<div class="blog-carousel slider-brand">
  <div class="blog-post-box">
    <div class="blog-post-box-inner">
      <div class="blog-post-image">
        <img
        src="https://via.placeholder.com/380x516"
        />
      </div>
    </div>
  </div>
  
  <div class="blog-post-box">
    <div class="blog-post-box-inner">
      <div class="blog-post-image">
        <img
        src="https://via.placeholder.com/380x516"
        />
      </div>
    </div>
  </div>
  
  <div class="blog-post-box">
    <div class="blog-post-box-inner">
      <div class="blog-post-image">
        <img
        src="https://via.placeholder.com/380x516"
        />
      </div>
    </div>
  </div>
  
  <div class="blog-post-box">
    <div class="blog-post-box-inner">
      <div class="blog-post-image">
        <img
        src="https://via.placeholder.com/380x516"
        />
      </div>
    </div>
  </div>
  
  <div class="blog-post-box">
    <div class="blog-post-box-inner">
      <div class="blog-post-image">
        <img
        src="https://via.placeholder.com/380x516"
        />
      </div>
    </div>
  </div>
  
  <div class="blog-post-box">
    <div class="blog-post-box-inner">
      <div class="blog-post-image">
        <img
        src="https://via.placeholder.com/380x516"
        />
      </div>
    </div>
  </div>
</div>

<! --- Less --->
.slick-slider {
  &.blog-carousel {
    &.slider-brand {
      margin: auto;

      .slick-list {
        overflow: visible;

        .slick-slide {
          width: calc(150px + 1rem);
          
          img {
            width: 100%;
            border: 1px solid red;
          }
          
          .blog-post-box-inner {
            overflow: hidden;
            padding: 0 0.5rem;
          }

          .blog-post-box-title,
          .blog-post-image.secondary {
            height: 45px;
            justify-content: center;
            margin: 3rem auto;
            max-width: 38rem;
          }

          .blog-post-excerpt-wrapper {
            text-align: center;
            padding: 0 1.5rem;
            width: calc(~'100% + 10rem');
            margin-left: -5rem;
          }

          &:not(.slick-center) {
            .blog-post-box-inner {
              margin-top: 7rem;
            }

            .blog-post-excerpt-wrapper {
              display: none;
            }
          }

          &.slick-center {
            margin: 0;
            // padding: 0 10rem;
            padding: 0;
            
            .blog-post-box-inner {
              width: 33vw
            }
          }
        }
      }
    }
  }

  .slick-arrow {
    background: linear-gradient(45deg, black 25%, transparent 25%, transparent), linear-gradient(-45deg, black 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, black 75%), linear-gradient(-45deg, transparent 75%, black 75%);
;
    background-position: 20px 0;
    background-size: 40px 35px;
    top: calc(~'100% - 12rem');
    border: none;
    font-size: 0;
    padding: 0;
    margin: 0;
    position: absolute;
    z-index: 1;
    width: 40px;
    height: 18px;
  }
  
  .slick-arrow {
    &.slick-next {
      transform: rotate(-90deg);
      right: calc(~'25vw + 1rem');
    }

    &.slick-prev {
      transform: rotate(90deg);
      left: calc(~'25vw + 1rem');
    }
  }
}

<! --- js --->
 $('.slider-brand').slick({
   centerMode: true,
   centerPadding: '60px',
   variableWidth: true,
   infinite: true,
   slidesToShow: 1,
   speed: 300,
   autoplay: false,
   arrows: true,
   dots: false,
   responsive: [
     {
       breakpoint: 2000,
       centerMode: true,
       settings: {
         slidesToShow: 2,
       }
     }
   ]
 });