Display none fora do @media não faz desaparecer quando está menor que 1024px

Boa tarde Pedro! Tudo certo?

Parece que o problema está no seu código CSS. Quando você define a propriedade display: none para .container__titulo e .opções, mas logo em seguida redefine essas mesmas classes com display: block ou display: flex, isso fará com que os elementos nunca desapareçam independentemente do tamanho da tela.

A solução seria modificar a ordem das regras CSS para que o display: block ou display: flex esteja dentro do @media query. Veja como ficaria o código corrigido:

.container__titulo{
    display: none;
}

.opções{
    display: none;
}

@media screen and (min-width: 1024px) {
     .container__titulo, 
     .container__titulo--negrito{
        font-family: var(--font-secundaria);
        font-size: 30px;
        display: block; /* Adicionei aqui */
     }

     .opções {
        display: flex; /* Adicionei aqui */
     }
}

.container__titulo{
    font-weight: 400;
}

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

.opções__item {
    padding: 0 1em;
    text-transform: uppercase;
}

.opções__link{
    text-decoration: none;
    color: var(--preto);
}

Com essa modificação, a propriedade display: none será aplicada fora do @media query, fazendo com que os elementos fiquem ocultos em telas menores que 1024px. Dentro do @media query, o display: block para .container__titulo e .display: flex para .opções serão ativados apenas quando a tela for maior ou igual a 1024px.

Atenciosamente, Wankerson Rodrigues