[Dúvida] O card não fica ao lado do carrossel, já alterei as divs e não parece ser isso

            <!-- If we need pagination -->
            <div class="swiper-pagination"> </div>
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="/img/ApacheKafka.svg"
                        alt="Livro sobre Apache e Kafka Alura book"></div>
                <div class="swiper-slide"><img src="/img/Liderança.svg"
                        alt="Livro sobre liderança em design Alura book"></div>
                <div class="swiper-slide"><img src="/img/Javascript.svg" alt="Livro sobre Javas Script Alura book">
                </div>
                <div class="swiper-slide"><img src="/img/Guia Front-end.svg" alt="Livro sobre Front-End Alura book">
                </div>
                <div class="swiper-slide"><img src="/img/Acessibilidade.svg"
                        alt="Livro sobre acessibilidade Alura book"></div>
                <div class="swiper-slide"><img src="/img/Nodejs.svg" alt="Livro sobre Nodejs Alura book"></div>

            </div>

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

            <div class="card">
                <!-- 1º LINHA -->
                <div class="card__descricao">
                    <!-- 1º coluna -->
                    <div class="descricao">
                        <h3 class="descricao__titulo">Talvez você também 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>
                    <!-- 2º COLUNA -->
                    <img src="/img/Angular.svg" alt="Foto Angular" class="descricao__imagem">
                </div>
                <!-- 2 º LINHA -->
                <div class="card__botoes">
                    <!-- 1º COLUNA -->
                    <ul class="botoes">
                        <li class="botoes__item"><img src="/img/Favoritos.svg" alt="Favoritar Livro"></li>
                        <li class="botoes__item"><img src="/img/Sacola.svg" alt="Adicionar no carrinho de compras">
                        </li>

                    </ul>
                    <!-- 2º COLUNA -->
                    <a href="#" class="botoes__ancora">Saiba Mais</a>
                </div>
            </div>
        </div>
    </div>

</section>



CSS

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

}