Как сделать такой необычный слайдер?

Всем привет, как сделать такой слайдер?

Порядок слайдов должен быть таким: нечетные сверху, четные снизу. Ширина картинок динамическая. И самая проблема в том, что не могу расположить картинки как на макете, пробовал с masonry, но не получается. Помогите пж

codepen - https://codepen.io/chaserof/pen/abwYVjK

<div class="slider">
  <div class="slide">
    <img src="https://image.shutterstock.com/image-photo/wide-angle-panorama-autumn-forestmisty-260nw-1195159864.jpg" alt="">
  </div>
  <div class="slide">
    <img src="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" alt="">
  </div>
  <div class="slide">
    <img src="https://images.freeimages.com/images/small-previews/89a/one-tree-hill-1360813.jpg" alt="">
  </div>
  <div class="slide">
    <img src="https://image.shutterstock.com/image-photo/wide-angle-panorama-autumn-forestmisty-260nw-1195159864.jpg" alt="">
  </div>
  <div class="slide">
    <img src="https://www.drivespark.com/images/2021-03/volvo-c40-recharge-17.jpg" alt="">
  </div>
  <div class="slide">
    <img src="https://media.gettyimages.com/photos/balanced-stones-on-a-pebble-beach-during-sunset-picture-id157373207?s=612x612" alt="">
  </div>
  <div class="slide">
    <img src="https://image.shutterstock.com/image-photo/wide-angle-panorama-autumn-forestmisty-260nw-1195159864.jpg" alt="">
  </div>
  <div class="slide">
    <img src="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" alt="">
  </div>
  <div class="slide">
    <img src="https://images.freeimages.com/images/small-previews/89a/one-tree-hill-1360813.jpg" alt="">
  </div>
  <div class="slide">
    <img src="https://image.shutterstock.com/image-photo/wide-angle-panorama-autumn-forestmisty-260nw-1195159864.jpg" alt="">
  </div>
  <div class="slide">
    <img src="https://www.drivespark.com/images/2021-03/volvo-c40-recharge-17.jpg" alt="">
  </div>
  <div class="slide">
    <img src="https://media.gettyimages.com/photos/balanced-stones-on-a-pebble-beach-during-sunset-picture-id157373207?s=612x612" alt="">
  </div>
</div>

img {
  height: 300px;
}

$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 3,
  variableWidth: true,
  rows: 2,
})

UPD: Еще он будет вот так адаптироваться на экранах < 768px