O Carrossel ficou nao movimenta

Bom dia. Eu estou na aula 5 produzindo CSS do desktop, video 6 --Revisando o flexbox. E apos uma comando no HTML, seguindo a instrução da Orientadora, o layouto dos livros ficaram em um formato maior, e o carrossel parou de funcionar. E qualquer comando que de dentro da classe, o mesmo não responde. Esta e a sessão que modifiquei e o mesmo comportamento afetou o segundo carrossel.

 <section class="carrossel">
        <h2 class="carrossel__titulos">Ultimos Lancamentos</h2>
        <!-- Slider main container -->
        <div class="carrossel__container">
<div class="swiper" style="background-color:#EBECEE";>
    <!-- Additional required wrapper -->
    <!-- If we need pagination -->
    <div class="carrossel__container">
    <div class="swiper-pagination">
    <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 sobre lideranca"></div>
      <div class="swiper-slide"><img src="img/Gestão2.svg" alt="Livro sobre gestao"> </div>
      <div class="swiper-slide"><img src="img/GuiaFront-end.svg" alt="Livro sobre Front-end"> </div>
      <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre Portugos"> </div>
      <div class="swiper-slide"><img src="img/Tuning.svg" alt="Livro sobre tunning"> </div>
      ...
    </div>
   
  
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  
  
  </div>
  <div class="card">

    <!--1a linha-->
    <div class="card__descricao">
        <!--1a coluna-->
        <div class="descricao">
            <h3 class="descricao__titulo">Talvez voce tenha intersse por...</h3>
            <h2 class="descricao__titulo-livro">Angular 11 e Firebase</h2>
            <p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
            </div>

            <!--2a coluna-->
            <img src="img/Angular.svg" class="descricao__imagem" alt="Angulo">
        </div>
        <!--2a linha-->
        <div class="card__botoes">
            <!--1a coluna-->
            <ul class="botoes">
                <li class="botoes__item"><img src="img/Favoritos.svg" alt="Livros favoritos"></li>
                <li class="botoes__item"><img src="img/Sacola.svg" alt="Adicionar no carrinho de compras"></li>
            </ul>
            <!--2a coluna-->
            <a href="#" class="botoes__ancora">Saiba mais</a>
        </div>
        </div>
    </div>
    </div>
</section>

    @media screen and(min-width: 1728px) {
    .carrossel__container{
        display: flex;
        margin: 0 20vw 3em 20vw;
    }
}