CSS não carrega | HTML e CSS: responsividade com mobile-first

O nome AluraBooks e o menu estão aparecendo no mobile, mesmo eu tendo colocado o media query, e as alterações que eu faço no css não estão aparecendo.

  <header class="cabecalho">
        <div class="container">
            <input type="checkbox" id="menu" class="container__botao">
            <label for="menu">
                <span class="cabecalho__menu-hamburguer container__imagem"></span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Programação</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Front-end</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Infraestrutura</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Business</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Design & UX</a>
                </li>
            </ul>
            <img src="img/Logo.svg" alt="Logo da Alurabooks" class="container__imagem">
            <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Books</h1>
        </div>

        <ul class="opcoes">
            <li class="opcoes__item">Categorias</li>
            <li class="opcoes__item"><a href="#" class="opcoes__link">Favoritos</a></li>
            <li class="opcoes__item"><a href="#" class="opcoes__link">Minha estante</a></li>
        </ul>

        <div class="container">
            <a href="#"> <img src="img/Favoritos.svg" alt="Meus favoritos" class="container__imagem"></a>
            <a href="#"><img src="img/Sacola.svg" alt="Carrinho de compras" class="container__imagem"></a>
            <a href="#"><img src="img/Usuario.svg" alt="Meu perfil" class="container__imagem"></a>
         </div>
    </header>


@media screen and (min-width: 1024px) {

    .container__titulo, .container__titulo--negrito {
        font-family: var(--fonte-secundaria);
        font-size: 30px;
    }

    .container__titulo {
        font-weight: 400;
        display: block;
    }

    .container__titulo--negrito {
        font-weight: 700;
    }

    .opcoes {
        display: flex;
    }

    .opcoes__item {
        padding: 0 1em;
        text-transform: uppercase;
    }
}

Olá, Caroline.

Tudo bem?

A alteração feita no @media é para fazer aparecer somente em telas acima de 1024px, isso acontece na classe ".container__titulo", que passando a propriedade display: block; faz o titulo aparecer, para fazer com que ele desapareça, precisa utilizar o display: none; na classe ".container__titulo" fora do @media, ou seja, para sumir em telas menores de 1024px, verifica se você tem essa propriedade fora do @media, tem que estar assim:

.container__titulo {
    display: none;
}

.opções {
    display: none;
}

.container__texto {
    display: none;
}

@media screen and (min-width: 1024px) {

        //AQUI O CÓDIGO NORMAL DOENTRO DO @MEDIA
}

Espero ter ajudado. Qualquer coisa manda aqui. Valeu.