Recipe Page - HTML e CSS

Sinto orgulho de ter conseguido deixar o design para mobile parecido com o proposto pelo desafio.

Talvez a primeira parte da página com a imagem, titulo e texto principal eu colocaria em uma <header>, e deixaria a <main>,com o resto do conteúdo, abaixo e englobaria os dois em uma <div>. Talvez assim teria como eu descartar Media Query que usei para deixar responsivo.

Para mim o principal desafio foi deixar a imagem cobrindo 100% do width da tela, como no design mobile proposto pelo desafio.

No fim a maneira que encontrei de fazer isso sem alterar o espaçamento do H1 a abaixo foi utilizando uma Media Query, deixando a imagem com position: absolute e definindo um height fixo para ela.

Essa solução que arrumei acaba distorcendo levemente a imagem quando a largura da tela vai ficando menor que 375px. Não me incomodou muito, mas sei que não é um comportamento adequado, queria saber como eu posso corrigir isso, se é um problema na estrutura do código ou algo que faltou no CSS.

Algumas dicas e críticas quanto a semântica do código são muito bem vindas ksks