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

Question

ohwoow @ohwoow

CSS
Swiper

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

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

Вот мой код:

<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,
});