Hacer lo que Hicimos en este avance del portafolio

1. Ajustamos el Diseño para pantallas mas pequeñas, ajustando la distancia entre el texto y la imagen ---- gap: 82px

.presentacion {          
    padding: 3% 15%;      /* Crea un espacio dentro del elemento ya sea Vertical u Horizontal */         
    display: flex;               /* Metodo de Diseño para ajustar en pantalla los elementos filas y columnas. */
    align-items: center;  /* Centralizar Elementos del display: flex */
    justify-content: space-between; /* Justificar elementos con espacion intermedios entre ellos */
    gap: 82px;                   /* Empezamos por ajustar el Diseño para pantallas mas pequeñas.
}

1. Implementando media queries para cambios en el diseño, para ello determinamos un punto de quiebre para el ancho de la pantalla en 1200px. En el archivo CSS, añade la siguiente media query:.

@media (max-width: 1200px) {
    */ Comportamiento en modo Movile */
    */ Posicinar la Imagen arriba del h1 */
    .presentacion {
        flex-direction: column-reverse; 
    }
}

1. Ajustando el encabezado para pantallas más pequeñas. En el CSS, en la media query para pantallas con un ancho máximo de 1200px, ajusta el padding de la clase .encabezado para centrarlo mejor:

@media (max-width: 1200px) {
    */ Comportamiento en modo Movile */
    */ Posicinar la Imagen arriba del h1 */
    
    .header {
        padding: 10%;
    }

1. Centrando los elementos del menú en pantallas más pequeñas, Verifica si la clase .header__menu ya tiene la propiedad display: flex. Añade justify-content: center a la clase .header__menu en la misma media query para centrar los elementos:

@media (max-width: 1200px) {
    .header__menu {
        justify-content: center;
    }