[Projeto] Desafio

Olá Ariel!

Pelo que você compartilhou, parece que você está no caminho certo para ajustar o layout responsivo do seu projeto. Vamos dar uma olhada nos pontos que podem ajudar a resolver a sua dúvida:

1. Espaçamento entre os elementos na .apresentacao: Para garantir que a imagem e o texto não fiquem colados quando a tela diminuir, você pode usar a propriedade gap dentro do seu @media query. Algo assim:

   @media (max-width: 1023px) {
       .apresentacao {
           flex-direction: column-reverse;
           gap: 20px; /* Ajuste o valor do gap conforme necessário */
       }
   }
   

2. Ajuste do layout para telas menores: Parece que você já aplicou a flex-direction: column-reverse;, o que está correto para inverter a ordem dos elementos. Certifique-se de que a estrutura HTML está configurada para que a imagem e o texto sejam filhos diretos da classe .apresentacao.

3. Centralização do cabeçalho e menu: O código que você postou já está centralizando o menu, mas se ainda não estiver como esperado, verifique se a propriedade display: flex; está aplicada na classe .cabecalho__menu. Além disso, o padding: 10%; na .cabecalho deve ajudar a centralizar o cabeçalho, mas você pode ajustar esse valor conforme necessário para melhor alinhamento.

Espero ter ajudado e bons estudos!