[Dúvida] As bolinhas não estão ficando em cima

Boa tarde,

Estou tentando colocar as bolinhas para cima no swiper-pagination, porém parece ter algo deixando tal ação imposível:

• Index `

  ÚLTIMOS LANÇAMENTOS

   <!-- Slider main container -->
   <div class="swiper">
  
       <!-- If we need pagination -->
       <div class="swiper-paginationn"></div>
  
       <!-- Additional required wrapper -->
   <div class="swiper-wrapper">
       <!-- Slides -->
           <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt= "Livro sobre ApacheKafka"></div>
           <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro Liderança"></div>
           <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro Portugol"></div>
           <div class="swiper-slide"><img src="img/Nodejs.svg" alt="Livro Nodejs"></div>
           <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro Acessibilidade"></div>
           <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro Guia Front-end"></div>
           <div class="swiper-slide"><img src="img/Angular.svg" alt="Livro Angular"></div>
           <div class="swiper-slide"><img src="img/ReactNative.svg" alt="Livro ReactNative"></div>
       </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>

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

    font-size: 18px;
    font-weight: 700;
    background-color: var(--branco);
    color: var(--laranja);
    padding: 1.5em 0 0.5em 0;
    text-transform: uppercase;
    text-align: center;
}

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


.swiper-paginationn{
    position: initial;
    margin: 1em 0;

}
/* div{
    display: flex;
    justify-content: center;
} */

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

`

A div foi uma forma que eu encontrei para que conseguisse movimentar ele para cima porém acaba quebrando as imagens do swiper.

Na class a unica forma de conseguir movimentar algo é colocando um "n" a mais porém ela não centraliza de forma nenhuma!