/*Estableciendo padding superior e inferior acorde al header*/
.formacion-academica {
    padding: var(--altura-header-Escritorio) 0;
}

/*Contenedor grid con items de 368px de ancho, gap de 16px y eliminando
formato por default de lista, ancho de 100%, margen superior de 32px*/
.formacion-academica__instituciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(23em, 1fr));
    grid-template-rows: 1fr;
    gap: 2em 1em;
    list-style: none;
    padding: 0;
    width: 100%;
}

/*Altura automática, esta aumenta con el texto que se agregue,
ancho heredado del contenedor ul, contenedor flex con espacio entre
imagen y div de textos*/
.formacion-academica__institucion {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    width: inherit;
}

.formacion-academica__link {
    display: inline-block;
    width: inherit;
}

/*Alto: 256px Ancho: 368px*/
.formacion-academica__imagen {
    height: 16em;
    width: inherit;
}

/*Margen superior de 8px*/
.formacion-academica__info {
    margin: 0.5em 0 0 0;
}

/*Margen inferior de 8px*/
.formacion-academica__formacion {
    font-size: var(--tamañoLetraEscritorio-subtitulosDscImagen);
    font-weight: 700;
    margin: 0 0 0.5em 0;
}

/*Limpiando margen y estableciendo tamaño de letra*/
.formacion-academica__nombre {
    font-size: var(--tamañoLetraEscritorio-parrafosYLinks-dscImagen-botones);
    font-weight: 500;
    margin: 0;
}

/*Tablets y celulares grandes u horizontales*/
@media only screen and (min-width: 768px) and (max-width: 1080px) {
    .formacion-academica {
        padding: var(--altura-header-Tablet) 0;
    }
}

/*Tablets y celulares grandes u horizontales
El rango es de 1135px para evitar que los items no pasen
de una sola fila*/
@media only screen and (min-width: 768px) and (max-width: 1135px) {
    .formacion-academica__instituciones {
        /*Estableciendo items de un ancho acorde al espacio disponible
        alineados en una fila un ancho minmax de 224px*/
        grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
        grid-template-rows: 1fr;
    }

    .formacion-academica__institucion {
        /*Altura automática, esta aumenta con el texto que se agregue,
        ancho heredado del contenedor ul*/
        height: auto;
        width: inherit;
    }

    /*Altura: 10.375em 166px ancho heredado del contenedor ul*/
    .formacion-academica__imagen {
        height: 10.375em;
        width: inherit;
    }

    .formacion-academica__formacion {
        font-size: var(--tamañoLetraTablet-parrafosYLinks-dscBienvenida-subtitulosDscImagen);
    }

    .formacion-academica__nombre {
        font-size: var(--tamañoLetraTablet-parrafoSobreMi-dscImagenes-botones);
    }
}

/*Celulares verticales*/
@media only screen and (min-width: 0px) and (max-width: 767px) {
    .formacion-academica {
        padding: var(--altura-header-Celular) 0;
    }

    .formacion-academica__instituciones {
        /*Estableciendo items en dirección vertical y centrados horizontalmente*/
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .formacion-academica__institucion {
        /*Ancho máximo de: 18.5em 296px
        Ancho al reducir 100%*/
        max-width: 18.5em;
        width: 100%;
    }

    .formacion-academica__imagen {
        /*Alto: 10.375em 166px*/
        height: 10.375em;
        width: inherit;
    }

    .formacion-academica__formacion {
        font-size: var(--tamañoLetraCelular-subtituloDescripcionImagen);
    }

    .formacion-academica__nombre {
        font-size: var(--tamañoLetraCelular-parrafosYLinks-descripcionImagen);
    }
}