[Dúvida] Responsividade não está indo nada.

Código html do pai:

<main class="container-pai">
            <section>
                <h1>Eleva seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h1>
                <p>Olá! Sou Joan Santos, desenvolvedor Front-end com especialidade em react, HTML e CSS. Ajudo
                    pequenos negócios e designers a colocaram em prática boas ideas. Vamos conversar?
                </p>
                <div class="links">
                    <h3 class="subtitulo-redessocias">Acesse as minhas redes:</h3>
                    <a href="#">
                        <img src="../imagens/github.png" alt="logo do GitHub">
                        GitHub
                    </a>
                    <a href="#">
                        <img src="../imagens/linkedin.png" alt="logo do linkedin">
                        Linkedin
                    </a>
                    <a href="#">
                        <img src="../imagens/instagram.png" alt="logo do instagram">
                        Instagram
                    </a>
                </div>
            </section>

            <img src="../imagens/depositphotos_141065150-stock-photo-handsome-young-programmer.jpg" alt="Foto do desenvolvedoro da Alura" class="container-pai-imagem">
        </main> 

CSS do pai e de como usei na @media

.container-pai{
    margin: 5% 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

@media (max-width= 800px) {
    .container-pai {
        background-color: red;
        flex-direction: column-reverse;
    }
}