[Bug] O carrossel para de funcionar do nada | HTML e CSS: responsividade com mobile-first

Ja fiz a parte do carrossel ai quando estou fazendo a parte do card que fica em baixo parece que o carrossel para de funcionar do nada e fica um em baixo do outro ai se eu so dou um f5 o problema não se resolve tenho que abrir novamente o arquivo.Alguem pode me ajudar.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <section>
        <h2 class="carrossel__titulo">ÚLTIMOS LANÇAMENTOS</h2>
            <!-- Slider main container -->
            <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="img/ApacheKafka.svg"alt="Livro sobre apache kafka e spring boot da alura books"></div>
                    <div class="swiper-slide"><img src="img/Arquitetura.svg"alt="Livro sobre liderança em design da alura books"></div>
                    <div class="swiper-slide"><img src="img/Portugol.svg"alt="Livro sobre javascript assertivo da alurabooks"></div>
                    <div class="swiper-slide"><img src="img/Nodejs.svg"alt="Livro Guia front end"></div>
                    <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre portugol"></div>
                    <div class="swiper-slide"><img src="img/Gestão.svg" alt="livro sobre acessibilidade"></div>
                </div>

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

            <div class="card">
                <div class="card__descricao">
                    <div class="card__textos">
                    <h3 class="card__titulo">Talvez você também se interesse por...</h3>
                    <h2 class="card__titulo-livro">Angular 11 e Firebase</h2>
                    <p class="card__descricao-livro">Construindo uma aplicação integrada com a plataforma do Google.</p>
                    </div>

                    <img src="img/angular.svg">

                </div>

                <div class="card__botoes">
                        <div class="card__botoes-1">
                            <a href="#"><img src="img/Favoritos.svg"></a>
                            <a href="#"><img src="img/Compras.svg"></a>
                        </div>
                    <a href="#" class="card__botao">Saiba mais</a>
                </div>




            </div>
    </section>

    <main></main>
    <footer></footer>

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

    <script>

        const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
        });

    </script>
</body>
</html>

CSS

.carrossel__titulo{
    font-size: 1.13rem;
    color: var(--cor-5);
    font-weight: 700;
    background-color: var(--cor-1);
    font-family: var(--fonte-principal);
    text-align: center;
    padding-top: 1.25em;
    padding-bottom: 0.5em;
}
.swiper-slide img {
    width: 100%; 
}

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

.swiper-pagination {
    position: initial;
    margin: .5em 0;
}
.card{

    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}
.card__descricao{
    display: flex;

}
.card__textos{
    display: flex;
    flex-direction: column;
}

.card__titulo{
    color: var(--cor-5);
    font-weight: 700;
    font-size: 1rem;
}
.card__titulo-livro{
    color: var(--cor-2);
    font-weight: 700;
    font-size: 1.13rem;
}
.card__descricao-livro{
    color: rgba(0, 0, 0, 0.85);
    font-weight: 400;
    font-size: 0.86rem;
}
.card__botoes{
    display: flex;
    justify-content: space-between;
}
.card__botao{
    padding: 8px, 16px, 8px, 16px;
    color: var(--cor-1);
    background-color: var(--cor-5);
    text-decoration: none;
}