[Dúvida] Card não fica ao lado do carrossel

Criei meu card utilizando a tag porém quando englobo o carrossel junto com o card o mesmo não está ficando ao lado, quando utilizo o inspecionar é como se o card não estivesse fazendo parte da div o que ocasiona do display flex não ser aplicado nele.

`    <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="img/Nodejs.svg" alt="Livro sobre Nodejs"></div>
                <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre portugol"></div>
                <div class="swiper-slide"><img src="img/Tuning.svg" alt="Livro sobre tuning"></div>
                <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro sobre apachekafka"></div>
                <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre JavaScript"></div>
                <div class="swiper-slide"><img src="img/Arquitetura.svg"
                        alt="Livro sobre arquitetura de software distribuído"></div>

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

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

<article class="card">
    <div class="card__container">
        <h3 class="card__titulo">Talvez você também se interesse por...</h3>
        <h2 class="card__titulo-livro">Angular 11 e Firebase</h2>
        <p class="card__descricao">Construindo uma aplicação integrada com a plataforma do Google.</p>
        <ul class="botoes">
            <li class="botoes__item"><img src="img/Favoritos.svg" alt="Ícone de favoritos"></li>
            <li class="botoes__item"><img src="img/Compras.svg" alt="Ícone de carrinho de compras"></li>
        </ul>
    </div>
    <div class="card__container">
        <div class="card__container__imagem">
            <img src="img/Angular.svg" alt="Imagem Angular" class="card__imagem">
        </div>
        <div class="card__container__botao">
            <a href="#" class="card__botao">Saiba mais</a>
        </div>
    </div>

</article>
</div>`



Esse é meu código CSS

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

}`