Bolinhas não sobem, e DISPLAY:NONE não funcinou | HTML e CSS: responsividade com mobile-first

Olá, Henrique! Tudo bom com você, meu amigo?

Então, cara, aconteceu um negócio muito louco que ainda não tinha visto. Eu tava fazendo os testes aqui com o seu código, comparando com o meu, e tudo estava igual, cara, não tinha nada de diferente que pudesse fazer diferença e que estivesse causando problemas. Só que aí eu fiz um teste, alterando o nome da classe das bolinhas de paginação do carrossel e das setas. E deu.

Eu não tenho a mínima ideia do porque estava dando errado antes, parece que os arquivos não estavam aceitando estilização de display, porque você conseguia alterar questões de margens, por exemplo, mas o display: none das setas e o display: initial das bolinhas não iam de jeito nenhum. Eu vou dar uma pesquisada depois pra ver se encontro algo que justifique isso, cara, porque eu achei bizarro.

No mais, mano, segue o código aí pra você fazer o teste também:

HTML

<section class="carrosel">
    <h2 class="carrosel_titulo">ÚLTIMOS LANÇAMENTOS</h2>
    <div class="carrosel__container">
        <div class="swiper">
            <!-- Additional required wrapper -->
            <!-- If we need pagination -->
            <div class="swiper-page"></div>
            <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"> <img src="./assets/Arquitetura.svg" alt="livro arquitetura"></div>
            <div class="swiper-slide"> <img src="./assets/ApacheKafka.svg" alt="livro alura b ooks"></div>
            <div class="swiper-slide"> <img src="./assets/Construct2.svg" alt="livro alura books"></div>
            <div class="swiper-slide"> <img src="./assets/Nodejs.svg" alt="livro alura books"></div>
            <div class="swiper-slide"> <img src="./assets/Javascript.svg" alt="livro alura books"></div>
            <div class="swiper-slide"> <img src="./assets/Portugol.svg" alt="livro alura books"></div>
            ...
            </div>

            <div class="swiper-button-p"></div>
            <div class="swiper-button-n"></div>
        </div>
    </div>
</section>



<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-page',
        type: 'bullets',
    },

  });</script>

CSS:

.carrosel_titulo {
    background: var(--cor-branca);
    color: var(--cor-laranja);
    font-size: 1,2rem;
    padding: 2rem 0 1rem 0;
    text-align: center;
    font-family: var(--fonte-principal);
    font-weight: 700;

}

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

.swiper-page {
    position: initial;
    margin: 0.5em 0;
    text-align: center;
}

.swiper-button-p, .swiper-button-n{
    display: none;
}

Eu acredito que tenha sido algum problema no servidor que fornece o código do carrossel. Isso porque, quando eu alterei o nome, as bolinhas perderam a estilização original de text-align: center, tanto que eu tive que colocar de novo no CSS. Mas aí eu também já não sei dizer se foi algo que aconteceu quando você estava fazendo a importação do código ou se algo atual, porque o meu código está funcionando normalmente, entende.

Mas enfim, espero ter te ajudado, meu amigo, bons estudos pra você e abraços!