[Bug] Os botões de navegação do swiper não funcionam

Nas aulas reinserimos os botões de navegação do swiper utilizado nos card, mas os botões não apresentam funcionalidade. Clico em ambos e nada acontece. Vou deixar abaixo o código

HTML dos cards

    <div class="swiper">
            <!-- Additional required wrapper -->
            
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="./assets/Arquitetura.svg" alt="Livro sobre Arquitetura de software distribuído da AluraBooks"></div>
            <div class="swiper-slide"><img src="./assets/MetricasAgeis.svg" alt="Livro sobre Métricas Ageis da AluraBooks"></div>
            <div class="swiper-slide"><img src="./assets/Javascript.svg" alt="Livro sobre Javascript da AluraBooks"></div>
            <div class="swiper-slide"><img src="./assets/Guia Front-end.svg" alt="Livro Guia de Front-End da AluraBooks"></div>
            <div class="swiper-slide"><img src="./assets/Gestão.svg" alt="Livro sobre Gestão da AluraBooks"></div>
            <div class="swiper-slide"><img src="./assets/Acessibilidade.svg" alt="Livro sobre Acessibilidade da AluraBooks"></div>
            <div class="swiper-slide"><img src="./assets/UX.svg" alt="Livro sobre UX da AluraBooks"></div>

            </div>
            
        
            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        
        </div>

Script no fim do HTML (imaginei que poderia ser o autoplay, mas mesmo removendo o trecho, o problema continua)

    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            loop: true,
            // autoplay: {
            //     delay: 3000,
            //     disableOnInteraction: false,
            // },
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            }
        });
    </script>

Trechos do CSS que envolvem os botões de navegação

.swiper-button-next, 
.swiper-button-prev {
    display: none;
    --swiper-navigation-size: 15px;
    --swiper-navigation-sides-offset: 0px;
    --swiper-navigation-top-offset: 190px;
    --swiper-navigation-color: var(--branco);
    background: var(--azul-degrade);
    padding: 1em 1.1em 1em 1.2em;
    border-radius: 50%;
}

@media screen and (min-width: 1024px) {
    .swiper-pagination {
        margin: 2em 0 3em 0;
    }

    .swiper {
        width: 60%;
    }

    .swiper-button-prev, .swiper-button-next {
        display: block;
    }

Agradeço de antemão a ajuda ;)