07 Haga lo que hicimos

1. Ajustando el diseño para pantallas más pequeñas

.presentacion {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;
}

1. Implementando media queries para cambios en el diseño

@media (max-width: 1023px ){

    .presentacion{
        flex-direction: column;
    }
}

1. Refinando el diseño responsivo

@media (max-width: 1023px ){

    .presentacion{
        flex-direction: column-reverse;
    }
}

1. Ajustando el encabezado para pantallas más pequeñas

@media (max-width: 1200px ){
.encabezado{
    padding: 10%;

    .presentacion{
        flex-direction: column-reverse;
    }
}

1. Centrando elementos del menú en pantallas más pequeñas

@media (max-width: 1200px ){
.header{
    padding: 10%;
}

.header__menu{
    justify-content: center;
}

    .presentacion{
        flex-direction: column-reverse;
    }
}

1. Refinando el diseño responsivo del encabezado