As bolinhas do carrosel não ficam na parte de cima

            <li class="lista-menu__item" >
                <a href="#" class="lista-menu__link"> Programação </a>
            </li>
            <li class="lista-menu__item">
                <a href="#" class="lista-menu__link"> Front-end</a>
            </li>
            <li class="lista-menu__item">
                <a href="#" class="lista-menu__link"> Infraestrutura</a>
            </li>
            <li class="lista-menu__item">
                <a href="#" class="lista-menu__link"> Bussines</a>
            </li>
            <li class="lista-menu__item">
                <a href="#" class="lista-menu__link"> Design e UX</a>
            </li>
        </ul>   



        <img src="img/Logo.svg" alt="logo alura books">
    </div>
    <div class="container">
        <a href="#"><img src="img/Favoritos.svg"  alt="logo favoritos" class="container__imagem"> </a>
        <a href="#"> <img src="img/Compras.svg" alt="logo compras"class="container__imagem"></a>
        <a href="#"> <img src="img/Usuario.svg" alt="logo usuario"class="container__imagem"></a>
    </div>
</header>

<section class="banner">
    <h2 class="banner__titulo"> Já sabe por onde começar?</h2>
    <p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
    <input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
</section>
<section class="carossel">
    <h2 class="carossel__titulo"> Ultimos lançamentos</h2>
    <!-- Slider main container -->

<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/Arquitetura.svg" alt="livro sobre arquitetura"> </div>
  <div class="swiper-slide"> <img src="img/Portugol.svg"alt="livro sobre portugol"></div>
  <div class="swiper-slide"> <img src="img/Liderança.svg"alt="livro sobre liderança"></div>
  <div class="swiper-slide"> <img src="img/Javascript.svg"alt="livro sobre javascript"></div>
  <div class="swiper-slide"> <img src="img/Tuning.svg"alt="livro sobre tuning"></div>

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

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

</section>


<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-pagination',
    type: 'bullets',
     },
    });
</script>