Meu card não fica igual, de jeito nenhum!! | HTML e CSS: responsividade com mobile-first

Eu ja vi e revi varias vezes a aula, ja apaguei o codigo, reescrevi e não tem jeito, nao fica igual. Não sei o que estou fazendo de errado. todas as

estão no local certo, <img> também.

Codigo HTML

```
<!DOCTYPE html>

...

Novos Lançamentos

            <div class="swiper-wrapper">
                <!-- Slides -->
                ...
            </div>

            <!-- If we need navigation buttons -->
            ...
        </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="imagens/Angular.svg" class="descricao__imagem" alt="Livro sobre Angular">
            </div>

            <!-- 2º linha -->
            <div class="card__botoes">
                <!-- 1º coluna -->
                <ul class="botoes">
                    <li class="botoes__item"><img src="imagens/Favoritos.svg" alt="Icone favoritos"></li>
                    <li class="botoes__item"><img src="imagens/Compras.svg" alt="Icone de sacalinha"></li>
                </ul>
                <!-- 2º coluna-->
                <a href="#" class="botoes__ancora"> Saiba mais</a>
                </div>
            </div>
    </section>


    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 1,
            pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
            },
        });
    </script>
</body>

```

Codigo CSS

Apenas o carrossel, pois é onde estou tendo problemas.

```.carrossel {
color: var(--laranja);
background-color: var(--branco);
text-align: center;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
padding: 1rem 0 0.5rem 0;

}

.swiper-slide img { width: 100% ; }

.swiper-button-prev, .swiper-button-next { display: none; }

.swiper-pagination { position: initial; margin: 0.6rem; }

.card__descricao { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }

.card__botoes { display: flex; justify-content: space-between; }

.botoes { display: flex; } .card { background: var(--branco); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 10px; margin: 1rem; padding: 1rem; }

.descricao__titulo { color: var(--laranja); font-weight: 700; }

.descricao__titulo-livro { color: var(--azul); font-size: 18px; font-weight: 700; margin: 0.5rem 0; }

.descricao__texto { font-family: var(--fonte-principal); font-weight: 400; font-size: 14px; line-height: 21px; color: rgba(0, 0, 0, 0.85); text-transform: none; }

.botoes_item { margin: 0 0.5rem; }`