O MEU CARD E MEU CARROSSEL NÃO ESTAO SE AFASTANDO.

HTML

<section class="carrossel">
         <h2 class="carrossel__titulo">Novos lançamentos</h2>
         <!-- Slider main container -->
         <div class="carrossel__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 Guia Front-End"></div>
               <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro Sobre Portugol"></div>
               <div class="swiper-slide"><img src="img/Acessibilidade.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">
               <!-- 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/Mask group.svg" class="descrição__imagem" alt="Angular">
               </div>

               <!-- 2º Linha -->
               <div class="card__botões">
                  <!-- 1º Coluna-->
                  <ul class="botões">
                     <li class="botões__item"><img src="img/Favoritos.svg" alt="Favoritar Livros"></li>
                     <li class="botões__item"><img src="img/Compras.svg" alt="Carrinho de compras"></li>
                  </ul>
                  <!-- 2º Coluna -->
                  <a href="#" class="botões__ancora">Saiba mais</a>
               </div>
            </div>
         </div>
      </section>

@media screen and (min-width: 1728px) {

    .carrossel__container {
        display: flex;
        margin: 0 20vw 3em 20vw;
        align-items: center;
    }

    .swiper-pagination {
        margin: 1em 0;
    }

    .swiper {
        width: 50%;
    }

    .descrição__titulo {
        font-size: 32px;
    }

    .descrição__texto {
        font-size: 15px;
    }

    .card {
        width: 60%;
        margin-left: 3em;
    }

}

Oi, Fabricio. Tudo bem?

Você poderia me descrever o problema com mais detalhes? Eu testei o seu código e aparentemente está tudo certo.