)
¡Hola, Esteban, espero que estés bien!
Veo que estás trabajando en la responsividad de tu proyecto. En el código CSS que compartiste, estás utilizando una media query para ajustar el diseño cuando la pantalla tiene un ancho máximo de 1200 píxeles. Aquí tienes algunos consejos y explicaciones sobre lo que estás haciendo:
Media Query: La media query @media (max-width: 1200px) se utiliza para aplicar estilos específicos cuando la pantalla es igual o menor a 1200 píxeles de ancho. Esto es útil para adaptar el diseño a dispositivos más pequeños como tablets.
Flexbox: Estás usando flex-direction: column-reverse; en .presentation y .presentation_imagen. Esto invierte el orden de los elementos en un contenedor flex, colocándolos en una columna en orden inverso. Asegúrate de que esto sea el comportamiento que deseas en pantallas más pequeñas.
Justificación y Alineación: La clase .header__menu tiene justify-content: center;, lo que centra los elementos horizontalmente dentro del contenedor. Esto es útil para mantener un diseño limpio y centrado.
Padding: Has aplicado padding: 10%; al .header, lo cual añade un espacio alrededor del contenido. Esto puede ayudar a que el diseño se vea más espacioso en pantallas más pequeñas.
Si quieres probar más ajustes, te recomiendo experimentar con diferentes valores de flex-direction, justify-content, y padding para ver cómo afectan al diseño en diferentes tamaños de pantalla.
Espero que estos consejos te sean útiles y puedas lograr el diseño responsivo que deseas. ¡Bons estudios!