Não consigo estilizar uma class dentro da Media Querry

Comecei o código abaixo no mobile-first, agora estou estilizando para tablet, @media screen and (min-width: 1024px), segui tudo igual a professora na aula de HTML e CSS: responsividade com mobile first - aula 04 - tópico 08, porém na etapa de estilizar no CSS a <div class="swiper-pagination"></div> não consigo, estou tentando aplicar um margin: 1.5em 0 3em 0; porém não altera. No CSS do mobile first consegui estilizar sem problemas porém agora dentro do Media Query está única class não está aceitando nenhuma estilização.

<section class="carrossel">
            <h2 class="carrossel__titulo">Últimos lançamentos</h2>
            <!-- Slider main 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/ApacheKafka.svg" alt="Livros sobre apache Kafta e spring boot da Alura Books"></div>
                    <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre liderança em design da Alura Books"></div>
                    <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre javascript assertivo da Alura Books"></div>
                    <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro guia front end da Alura books"></div>
                    <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre portugol da Alura Books"></div>
                    <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro sobre acessibilidade da Alura Books"></div>
                </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__descrição">
                    <div class="descrição">
                        <h3 class="descrição__titulo">Talvez você também se interesse por...</h3>
                        <h2 class="descrição__titulo-livro">Angular 11 e Firebase</h2>
                        <p class="descrição__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
                    </div>
                    <img src="img/Angular.svg" alt="Livro sobre Angular da Alura Books" class="descrição__imagem">
                </div>
                <div class="card__botões">
                    <ul class="botões">
                        <li class="botões__item"><img src="img/Favoritos.svg" alt="Favoritar Livro"></li>
                        <li class="botões__item"><img src="img/Compras.png" alt="Adicionar no carrinho de compras"></li>
                    </ul>
                        <a href="#" class="botões__âncora">Saiba mais</a>
                </div>
            </div>
        </section>

-- CSS --

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

}

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

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

.swiper-pagination { position: initial; margin: 0.5em 0 0.7em 0; }

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

.card__descrição { display: flex; justify-content: space-between; margin-bottom: 0.5em; }

.descrição__titulo { color: var(--laranja); font-weight: 700; }

.descrição__titulo-livro { color: #002F52; font-size: 18px; font-weight: 700; margin: 0.5em 0; }

.descrição__texto { color: rgba(0, 0, 0, 0.85); font-size: 14px; }

.card__botões { display: flex; justify-content: space-between; align-items: center; }

.botões { display: flex; }

.botões__âncora { background-color: var(--laranja); padding: 1em 2.2em; color: var(--branco); font-weight: 700; text-decoration: none;

}

@media screen and (min-width: 1024px) {
    .carrossel__titulo {
        font-size: 26px;
        padding: 1.8em 0 0.8em 0;
    }

    .swiper-pagination {
        margin: 1.5em 0 3em 0;
    }
}