custom owl carousel layout

I want to create a custom layout/slide using Owl Carousel, but I'm not sure how to accomplish this.

Here's the slider I'm trying to achieve:slider i'm trying to achieve And this is the slide I've managed so far: slide i've got so far

As you can see, there are some problems. The pictures are overlapping, and I can't seem to add a margin between them.

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 code:

.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: added stagePadding variable so images on the edge(left and right) and half visible only.otherwise it's fully visible

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

found almost the example i wanted

used the code above as a reference and edited to fit my layout : css:

.carousel_2 .owl-item:has(+ .owl-item.active.center) {
    /* Previous sibling */
    height: 550px;
    align-self: flex-start;
    margin-top: 0;
  }
  .carousel_2 .owl-item.active.center + .owl-item {
    /* Next sibling */
    height: 550px;
    align-self: flex-start;
    margin-top: 0;
  }

  .carousel_2 .active.center {
    height: 850px;
    align-self: center;
    margin-top: 0;
  }

  .owl-carousel .owl-item {
    height: 450px;
    align-self: flex-start;
    margin-top: 50px;
  }

html(blade)

<div class="owl-carousel owl-theme carousel_2">
        @foreach(range(1, 5) as $_)
        <span>
            <img class="item" data-dots="1" src="https://rb.gy/9hjl1d" alt="">
            <div class="text-center">
                <h3>TITLE HERE</h3>
                <div class="primary-text fw-bold">850 $</div>
            </div>
        </span>
        @endforeach
    </div>

added simple loop to cut down on html i had to write JS :

$('.carousel_2').owlCarousel({
    loop: false,
    margin: 40,
    center: true,
    dots: false,
    startPosition: 1,
    responsive: {
      0: {
        items: 1,
      },
      600: {
        items: 1,
      },
      1000: {
        items: 2,
      },
      1200: {
        items: 4,
      },
    },
  });