/* grid-contenedor-header */ /**/

@supports(display: grid ) {

  .grid-contenedor-header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "franja-gov-co-header"
                         "franja-logos-institucionales"
                         "franja-menu-institucional"
                         "franja-imagen-compilacion";
  }

  .franja-gov-co-header {
    grid-area: franja-gov-co-header;
  }

  .franja-logos-institucionales {
    grid-area: franja-logos-institucionales;
  }

  .franja-menu-institucional {
    grid-area: franja-menu-institucional;
  }

  .franja-imagen-compilacion {
    grid-area: franja-imagen-compilacion;
  }
}

/* -> grid-contenedor-header */


/* grid-contenedor-contenido */

@supports(display: grid ) {

  .grid-contenedor-contenido {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "franja-titulo-principal"
                         "navegacion-modulos";
  }

  .franja-titulo-principal {
    grid-area: franja-titulo-principal;
  }

  .navegacion-modulos {
    grid-area: navegacion-modulos;
  }

}

/* -> grid-contenedor-contenido */


/* grid-contenedor-navegacion-modulos */

@supports(display: grid ) {

  .grid-contenedor-navegacion-modulos {
    display: grid;
    grid-template-columns: 220px;
    grid-gap: 50px;
    grid-auto-flow: row;
  }

  @media screen and (min-width: 768px) {

    .grid-contenedor-navegacion-modulos {
      grid-template-columns: repeat(2, 220px);
    }
  }

  @media screen and (min-width: 992px) {

    .grid-contenedor-navegacion-modulos {
      grid-template-columns: repeat(3, 220px);
    }
  }

  @media screen and (min-width: 1140px) {

    .grid-contenedor-navegacion-modulos {
      grid-template-columns: repeat(4, 220px);
    }
  }

}

/* -> grid-contenedor-navegacion-modulos */


/* grid-contenedor-modulo */

@supports(display: grid ) {

  .grid-contenedor-modulo {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr;
    grid-template-areas: "imagen-modulo"
                         "titulo-modulo"
                         "ver-mas-modulo";
  }

  .imagen-modulo {
    grid-area: imagen-modulo;
  }

  .titulo-modulo {
    grid-area: titulo-modulo;
  }

  .ver-mas-modulo {
    grid-area: ver-mas-modulo;
  }

}

/* -> grid-contenedor-modulo */