Escondendo Elementos no HTML

A classe hidden é utilizada para ocultar um elemento na página. Ela aplica a propriedade display: none!important;, que faz com que o elemento não seja exibido no layout da página, mesmo que ele ainda exista no código HTML. O !important garante que essa regra de estilo tenha prioridade sobre outras regras de estilo que possam estar definidas para o mesmo elemento.

Você também pode decidir exibir/esconder elementos baseado no tamanho geral da sua janela de trabalho, ou tamanho do dispositivo.  A classe desktop exibirá o conteúdo em resoluções acima de 1024px enquanto a classe mobile só renderizará o conteúdo em dispositivos com resoluções até 1024px.

Esse código SCSS fornece uma maneira simples e eficaz de ocultar elementos em diferentes contextos de layout, seja de forma geral ou especificamente em dispositivos móveis.