Tópico 1: Viewport
A meta tag `viewport` controla como o site é exibido em dispositivos móveis. `width=device-width` ajusta a largura da página para a do dispositivo e `initial-scale=1.0` define o nível de zoom inicial.
Tópico 2: Media Queries
Media queries permitem aplicar estilos CSS com base em características do dispositivo, como largura da tela, tipo de mídia (tela, impressão) e preferências do usuário (modo escuro).
Este texto muda de cor em modo escuro!
Tópico 3: Imagens Responsivas
Usando `max-width: 100%;`, a imagem nunca ultrapassará a largura de seu contêiner. Para diferentes resoluções, usamos o atributo `srcset`.
Tópico 4: Tipografia Adaptável
Este texto se ajusta! O tamanho da fonte usa `clamp()` para variar entre um valor mínimo, um preferido (relativo à viewport) e um máximo.