Слайдер Swiper выходит за колонку в Css Grid

У меня Css Grid с двумя колоками в первой слайдер Swiper, во второй картинка. Swiper выходит за колонку и заходит под картинку

CSS Grid:

Слайдер:

swiper.js:

import { Pagination } from "swiper";
import Swiper from 'swiper';

Swiper.use(Pagination);

function buildSlider() {
    let sliders = document.querySelectorAll('[class*="__swiper"]:not(.swiper-wrapper)');
    if (sliders) {
        sliders.forEach(slider => {
            slider.parentElement.classList.add('swiper');
            slider.classList.add('swiper-wrapper');
            for (const slide of slider.children) {
                slide.classList.add('swiper-slide');
            }
        });
    }
}

function initSliders() {
    buildSlider();

    if (document.querySelector('.main-block__slider')) {
        new Swiper('.main-block__slider', {
            modules: [Pagination],
            slidesPerView: 'auto',
            spaceBetween: 1,
            speed: 800,
            observer: true,
            observeParents: true,

            pagination: {
                el: '.controll-main-block__dotts',
                clickable: true,
            },
        });

    }
}

window.addEventListener("load", function () {

    initSliders();
});

index.html:

<div class="main-block__body">
    <div class="main-block__body">
        <div class="main-block__slider">
            <div class="main-block__swiper">
                <div class="main-block__slide"></div>
                <div class="main-block__slide"></div>
                <div class="main-block__slide"></div>
            </div>
        </div>
        <div class="main-block__media">
        </div>
    </div>
</div>

style.scss:

.main-block {

    &__body {
        display: grid;
        grid-template-columns: 1fr 39.6875%;
        margin-bottom: rem(37);
    }

    &__slider {}

    &__swiper {}

    &__slide {}

    &__media {}
}