Oi, Maíra, tudo bem?
No seu rodapé a pseudo-classe :hover
foi aplicada corretamente, pois ao passar o mouse por cima de cada um dos itens eles mudam de cor para uma tonalidade alaranjada. Contudo, no caso dos tópicos que fazem parte da divisão acima, eles não apresentam a pseudo-classe. Para isso podemos adicionar o seguinte código:
.tópicos__link:hover {
color: var(--laranja);
background-color: var(--branco);
}
Esse código não precisa estar inserido dentro de um media-query, pois como o projeto está sendo construído em mobile first a partir do tamanho mínimo todas as telas com dimensões superiores ao padrão estabelecido para dispositivos mobile, manterão a funcionalidade do aplicada ao :hover
. No caso do código acima, ele modifica a cor do texto para laranja e a cor de fundo dos retângulos para branco.
Caso queira mais informações sobre essa pseudo-classe, recomendo a leitura da documentação abaixo:
Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum.
Abraços!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!