/*para poner la imagen del lado izquierdo y el texto del lado derecho
podemos utilizar grid o flexbox. el profe lo hará de las dos formas.*/

/*con Flex*/
@media (min-width:768px){

    .sobre-nosotros{

        display: flex;/*alinea todo de izquierda a derecha*/
        gap: 2rem; /*utilizamos gap, que viene en CSS3 pero dice el profe que no esta soportado
                    en todos los navegadores, como safari. entonces para solucionar este detalle
                    quitamos el gap y utilizamos el siguiente codigo:*/
        justify-content: space-between;/*con esta instruccion flex alinea los elementos uno del lado 
                    izquierdo y el otro del lado derecho.*/
        
    }

    .sobre-nosotros__imagen,
    .sobre-nosotros__texto{
        flex-basis: 50%; /*flex-basis, en flex es el: width. con esta instrucción hacemos que
                        tanto la imagen como el texto tomen el 50% del ancho del espacio
                        definido en el contendor. y es así como se harían las dos columnas*/
        flex-basis: calc(50% - 1 rem);/*con esta instrucción sustituimos al Gap. le indica al 
                        navegador que debe asignarle a los elementos el 50% del espacio
                        asignado al contenedor y que le debe asignar 1rem de espacio entre cada 
                        elemento. esta instrucción sustituye a la de arriba*/
    }
}

/*aqui esta la manera de hacerlo con grid. menos líneas de código, mismo resultado*/
/*@media (min-width:768px){
    .sobre-nosotros{
        display: grid;
        grid-template-columns: repeat(2,50%);
        column-gap: 2rem;
    }
}*/ /*comentamos el codigo del grid, para dejar trabajando al flex*/