Как спрятать боковые элементы слайдера на половину?

Question

[ohwoow]

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




Вот мой код:

<div class="featured-slider">
                <div class="featured-slider__container">
                    <div class="swiper-wrapper">
                        <div class="featured-slider__slide">
                            <div class="featured-slider__media">
                                <img src="app/img/featured-slider-img-1.jpg" alt="">
                                <button class="featured-slider__play"></button>
                                <div class="featured-slider__name">
                                    A Guide To Rocky Mountain Vacations
                                </div>
                            </div>
                        </div>
                        <div class="featured-slider__slide">
                            <div class="featured-slider__media">
                                <img src="app/img/featured-slider-img-2.jpg" alt="">
                                <button class="featured-slider__play"></button>
                                <div class="featured-slider__name">
                                    A Guide To Rocky Mountain Vacations
                                </div>
                            </div>
                        </div>
                        <div class="featured-slider__slide">
                            <div class="featured-slider__media">
                                <img src="app/img/featured-slider-img-3.jpg" alt="">
                                <button class="featured-slider__play"></button>
                                <div class="featured-slider__name">
                                    A Guide To Rocky Mountain Vacations
                                </div>
                            </div>
                        </div>
                        <div class="featured-slider__slide">
                            <div class="featured-slider__media">
                                <img src="app/img/featured-slider-img-1.jpg" alt="">
                                <button class="featured-slider__play"></button>
                                <div class="featured-slider__name">
                                    A Guide To Rocky Mountain Vacations
                                </div>
                            </div>
                        </div>
                        <div class="featured-slider__slide">
                            <div class="featured-slider__media">
                                <img src="app/img/featured-slider-img-2.jpg" alt="">
                                <button class="featured-slider__play"></button>
                                <div class="featured-slider__name">
                                    A Guide To Rocky Mountain Vacations
                                </div>
                            </div>
                        </div>
                        <div class="featured-slider__slide">
                            <div class="featured-slider__media">
                                <img src="app/img/featured-slider-img-3.jpg" alt="">
                                <button class="featured-slider__play"></button>
                                <div class="featured-slider__name">
                                    A Guide To Rocky Mountain Vacations
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

.featured-slider {
    width: 100%;
}

.featured-slider__container {
    overflow: hidden;
}

.featured-slider__slide {
    display: flex;
}
.featured-slider__media {
    position: relative;
    display: flex;
    img {
        border-radius: 8px;
        max-height: 551px;
    }
}

const featuredSlider = document.querySelector('.featured-slider__container');

let secondSlider = new Swiper(featuredSlider, {
	slidesPerView: 3,
	centeredSlides: true,
	spaceBetween: 32,
	slideClass: 'featured-slider__slide',
	grabCursor: true,
	loop: true,
});