Индивидуальный макет карусели совы

Я хочу создать собственный макет/слайд с помощью Owl Carousel, но не знаю, как это сделать.

Вот слайдер, которого я пытаюсь достичь:слайдер, которого я пытаюсь достичь А это слайд, который мне пока удалось: слайд, который у меня есть

Как видите, есть некоторые проблемы. Изображения перекрываются, и я не могу добавить поля между ними.

HTML:

<div class = "section-padding">
    <div class = "screenshot_slider owl-carousel owl-theme">
        <div class = "item">
            <img src = "SomeImage.jpg" alt = "">
        </div>
        <div class = "item">
            <img src = "SomeImage.jpg" alt = "">
        </div>
        <div class = "item">
            <img src = "SomeImage.jpg" alt = "">
        </div>
        <div class = "item">
            <img src = "SomeImage.jpg" alt = "">
        </div>
        <div class = "item">
            <img src = "SomeImage.jpg" alt = "">
        </div>
        <div class = "item">
            <img src = "SomeImage.jpg" alt = "">
        </div>
        <div class = "item">
            <img src = "SomeImage.jpg" alt = "">
        </div>
    </div>
</div>

CSS-код:

.section-padding {
  padding: 80px 0;
}

.owl-item .item {
  transform: translate3d(0, 0, 0); /* DO NOT REMEMBER WHERE TU PUT THIS, SEARCH FOR 3D ACCELERATION */
  // transition: all .25s ease-in-out;
  margin: 50px 0; /* OVERWRITE PLUGIN MARGIN */
}

.screenshot_slider .owl-item .item img {
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  transition: 0.3s;
  transform: scale(0.8);
}

// .screenshot_slider .owl-item.center{
//   margin-left: 90px;
//   margin-right: 90px;
// }

.screenshot_slider .owl-item.center .item img {
  transform: scale(1.3);
}

/* Adjacent siblings to the center item */
.screenshot_slider .owl-item:has(+ .owl-item.active.center) .item img, /* Previous sibling */
.screenshot_slider .owl-item.active.center + .owl-item .item img {
  /* Next sibling */
  transform: scale(1.1);
}

.screenshot_slider .owl-nav {
  text-align: center;
  // margin: 40px 0;
}

.screenshot_slider .owl-item:last-child { /* Remove margin from last item */
  margin-right: 0; 
}

.screenshot_slider .owl-nav button {
  font-size: 24px !important;
  margin: 10px;
  color: #033aff !important;
}

js: добавлена ​​переменная stagePadding, чтобы изображения находились по краям (слева и справа) и были видны только наполовину. В противном случае они видны полностью.

$('.screenshot_slider').owlCarousel({
        center: true,
        loop:true,
        margin:10,
        dots: false,
        stagePadding: 200,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1200: {
                items: 3
            }
        }
    });