¡Hola Matias, espero que estés bien!
Parece que estás trabajando en un proyecto de portafolio y estás enfrentando algunos desafíos con el diseño responsivo. Veamos cómo podemos abordar cada uno de los puntos que mencionaste:
- Espacio entre imagen y texto en pantallas más pequeñas: Ya has utilizado la propiedad - gapen la clase- .presentacion, lo cual es una excelente manera de crear espacio entre los elementos. Asegúrate de que el valor de- gapsea suficiente para mantener una separación adecuada incluso en pantallas más pequeñas.
 
- Media query para pantallas menores de 1023px: Ya tienes una media query configurada para pantallas menores de 1200px. Para manejar pantallas más pequeñas, puedes agregar otra media query para 1023px. Dentro de esta media query, puedes cambiar la dirección del flex a - columnpara que la imagen se posicione sobre el texto:
 - @media (max-width: 1023px) {
    .presentacion {
        flex-direction: column;
    }
}
 
- Orden de los elementos en - .presentacion: Ya estás usando- flex-direction: column-reverseen tu media query para pantallas menores de 1200px, lo cual debería invertir el orden de los elementos correctamente.
 
- Ajuste del encabezado para pantallas más pequeñas: En la media query para pantallas menores de 1200px, ya has ajustado el - paddingdel- .header. Asegúrate de que el valor de- paddingsea suficiente para centrar el encabezado y que no se desborde.
 
- Centrado de elementos del menú: Ya tienes - justify-content: centeren la clase- .header__menudentro de la media query, lo cual debería centrar los elementos del menú. Verifica que esta propiedad esté funcionando como esperas.
 
- Refinamiento del diseño del encabezado: Continúa ajustando los valores de - paddingy- justify-contenthasta que el encabezado se alinee visualmente con tu diseño en Figma. A veces, pequeños ajustes pueden hacer una gran diferencia.
 
Espero que estas sugerencias te ayuden a resolver los problemas de diseño responsivo que estás enfrentando. ¡Bons estudios!