[Dúvida] Os livros do Swiper estão gigantes

Html

        <section class="carrosel">
            <h1 class="carrocel__ttl" >Ultimos lançamentos</h1>
            <!-- Slider main container -->
            <div class="swiper">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">   
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
                <!-- Slides -->
                <div class="swiper-slide"><img src="./img.s/ApacheKafka.svg" alt="Livro Apache Kafka"></div>
                <div class="swiper-slide"><img src="./img.s/Javascript.svg" alt="Livro Javascript"></div>
                <div class="swiper-slide"><img src="./img.s/Nodejs.svg" alt="Livro Nodejs"></div>
                <div class="swiper-slide"><img src="./img.s/MEAN.svg" alt="Livro MEAN"></div>
                <div class="swiper-slide"><img src="./img.s/ReactNative.svg" alt="Livro React Native"></div>
                <div class="swiper-slide"><img src="./img.s/Liderança.svg" alt="Livro Liderança"></div>
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            
                <!-- If we need scrollbar -->
                <div class="swiper-scrollbar"></div>
            </div>
        </section>
    </main>
     <footer></footer>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                },
        });

    </script>

CSS:

.swiper-slide img{
    width: 100%;
}

.swiper-button-prev, .swiper-button-next {
    display: none !important;
}

.swiper-pagination {
    position: initial;
}