Section não conecta com o css.

E essa é a section que deu certo:

    <section class="carrossel">
    <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/Liderança.svg" alt="Livro sobre Liderança em Design da Alura Books"></div>
        <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre Javascript assertivo da Alura Books"></div>
        <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro sobre guia Front-End do Alura Books"></div>
        <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre Portugol do Alura Books"></div>
        <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro sobre Acessibilidade do Alura Books"></div>
    </div>

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

    <div class="card">
        <!-- 1º Linha -->
        <div class="card__descrição">
            <!-- 1º Coluna -->
            <div class="descrição">
                <h3 class="descrição__titulo">Talvez você também se interesse por...</h3>
                <h2 class="descrição__titulo-livro">Angular 11 e Firebase</h2>
                <p class="descrição__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
            </div>
            <!-- 2º Coluna -->
            <img src="img/Angular.svg" class="descrição__imagem" alt="">
        </div>
        <!-- 2º Linha -->
        <div class="card__botoes">
            <!-- 1º Coluna -->
            <ul class="botoes">
                <li class="botoes__item"><img src="img/Favoritos.svg" alt="Favortitar livro"></li>
                <li class="botoes__livro"><img src="img/Compras.svg" alt="Adicionar no carrinho de compras"></li>
            </ul>
            <!-- 2º Coluna -->
            <a href="#" class="botoes__ancora">Saiba mais</a>
        </div>
    </div>
</section>

<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>

tá faltando a div do container do carrossel.

<section class="carrossel">
            <h2 class="carrossel__titulo">Mais Vendidos</h2>
            <!-- Slider main container -->
            <div class="carrossel__container">
                <div class="swiper">

fiz, mas não deu certo.

bom, rodei seu código aqui, sem alteração nenhuma e ele funcionou, seu problema está em outro lugar.