Problem with overlapping. First slide overlaps button, while others don't.

[Haller125]

First slide always overlaps navigation button that is under the space between 1st and 2nd slide. In screenshot it is the next slide button ('>')

in this screenshot that button can be clicked, but pervious slide button ('<') overlapped and can't be clicked bu cursor.

Here the code:

`

<Swiper
modules={[A11y, Navigation, Pagination]}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}

            breakpoints={breakpoints}
            centeredSlides={true}
            spaceBetween={50}

            navigation={{
                nextEl: '.custom-next-news',
                prevEl: '.custom-prev-news',
            }}
            pagination={{clickable: true, el: '.swiper-pagination-news', renderBullet: bulletsForSwiper}}
        >
            {data.map((news, index) => {
                return (
                    <SwiperSlide>
                        <NewsCard news={news}/>
                    </SwiperSlide>
                );
            })}
            <div
                className={"absolute top-[50%] flex justify-between w-[calc(66.6667%+125px)] left-[50%] -translate-x-[50%] -translate-y-[100%] z-[0.5]"}>
                <button
                    className="custom-prev-news cursor-pointer transition-all ease-in-out duration-200"
                    onClick={logButton}>
                    <SwiperPrev/>
                </button>
                <button
                    className="custom-next-news cursor-pointer transition-all ease-in-out duration-200"
                    onClick={logButton}>
                    <SwiperNext/>
                </button>
            </div>
            <div className={"flex justify-center items-center"}>
                <div className="swiper-pagination-news !w-[67%] h-full !static flex 1s:flex-wrap 1s:max-w-[90%] my-[30px] mx-[0px]">

                </div>
            </div>
        </Swiper>
    </div>`