[Bug] display flex não funciona

Eu não consegui posicionar o card e o carrossel lado a lado... [Trecho HTML]

 <section class="carrossel">
        <h2 class="carrossel__titulo">Últimos 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="./assets/livro um.svg" alt="primeiro livro"></div>
                    <div class="swiper-slide"><img src="./assets/livro dois.svg" alt="segundo livro"></div>
                    <div class="swiper-slide"><img src="./assets/livro tres.svg" alt="terceiro livro"></div>
                    <div class="swiper-slide"><img src="./assets/livro quatro.svg" alt="quarto livro"></div>
                    <div class="swiper-slide"><img src="./assets/livro cinco.svg" alt="quinto livro"></div>

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

            <div class="card">
                    <div class="card__descricao">
                        <div class="descricao">
                            <h3 class="descricao__titulo">Talvez você se interesse 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>
                        <img class="descricao__imagem" src="./assets/Angular.svg" alt="Livro Angular imagem">
                    </div>

                    <div class="card__botoes">
                        <ul class="botoes">
                            <li class="botoes__item"><img src="./assets/Favoritos.svg" alt="Favoritar livro"></li>
                            <li class="botoes__item"><img src="./assets/Compras.svg" alt="Comprar livro"></li>
                        </ul>
                        <a class="botoes__ancora" href="#">Saiba mais</a>
                    </div>
                </div>
            </div>
    </section>

[Trecho CSS]

@media screen and (min-width: 1728px) {
     .carrossel__container {
        display: flex;
    }
}