Recipe page responsive using HTML and CSS only

Fala @tpinheiro4!

Seu projeto está excelente!

Tenho uma sugestão:

📌 Não consegui entender exatamente o motivo de você ter usado margin: 300px na versão desktop, mas imagino que seja por uma dessas duas razões: Centralizar o card ou limitar o crescimento dele.

Seja qual for a razão, usar margens nessas proporções não é a melhor opção, pois pode prejudicar a flexibilidade do elemento e também em alguns casos a responsividade pode ficar comprometida.

Se sua intenção foi centralizar o elemento, você pode substituir a margem por isso aqui:

body {
    min-height: 100vh;
    display: flex; /*  também funciona com grid  */
    justify-content: center;
    align-items: center;
}

Mas se a sua intenção foi limitar o crescimento do card, você pode simplesmente adicionar um max-width a ele. Assim, ele continua responsivo, mas só cresce até determinado ponto, e esse ponto é o valor que você coloca em max-width.

Espero que ajude!

Fora isso, ótimo trabalho!

First of all, congratulations on the solution, but I have some points to consider:

Use the serif font available in the project in the appropriate titles;

Use the CSS ::marker pseudo-element to style list markers;

Change the color of the texts at the beginning of the page so that they look like the texts on the rest of the page;

Again congratulations on the solution.