MAS UM

css
Copiar
Editar
.apresentacao {
  display: flex;
  gap: 20px; /* ou outro valor desejado */
}
Media query para layout coluna em telas menores que 1023px
css
Copiar
Editar
@media (max-width: 1023px) {
  .apresentacao {
    flex-direction: column;
    align-items: center; /* opcional para centralizar */
  }
}
Inverter a ordem com column-reverse para < 1200px
css
Copiar
Editar
@media (max-width: 1200px) {
  .apresentacao {
    flex-direction: column-reverse;
    align-items: center;
  }
}
 Ajustar padding do cabeçalho para centralizar melhor
css
Copiar
Editar
.cabecalho {
  padding: 20px 40px; /* top/bottom e left/right */
}

@media (max-width: 1023px) {
  .cabecalho {
    padding: 20px; /* mais equilibrado em telas pequenas */
  }
}
 Centralizar os itens do menu no cabeçalho
css
Copiar
Editar
.cabecalho__menu {
  display: flex;
  justify-content: center;
  gap: 20px; /* espaçamento entre os links */
}
Refinar o design do cabeçalho
Inclua ajustes finos com flexbox e padding em uma media query:

css
Copiar
Editar
@media (max-width: 768px) {
  .cabecalho {
    padding: 16px;
    flex-direction: column;
    align-items: center;
  }

  .cabecalho__menu {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}