/* grid-contenedor-footer */

@supports(display: grid ) {

  .grid-contenedor-footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "franja-AJ"
                         "franja-informacion";
  }

  .franja-AJ {
    grid-area: franja-AJ;
  }

  .franja-informacion {
    grid-area: franja-informacion;
  }

}

/* -> grid-contenedor-footer */


/* grid-contenedor-franja-informacion */

@supports(display: grid ) {

  .grid-contenedor-franja-informacion {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "contenido-franja-informacion";
  }

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

    .grid-contenedor-franja-informacion {
      grid-template-columns: auto 1140px auto; 
      grid-template-areas: "left-panel-franja-informacion contenido-franja-informacion right-panel-franja-informacion";
    }
  }

  .left-panel-franja-informacion {
    grid-area: left-panel-franja-informacion;
  }

  .contenido-franja-informacion {
    grid-area: contenido-franja-informacion;
  }

  .right-panel-franja-informacion {
    grid-area: right-panel-franja-informacion;
  }

}

/* -> grid-contenedor-franja-informacion */


/* grid-contenedor-informacion-institucional */

@supports(display: grid ) {

  .grid-contenedor-informacion-institucional {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "institucional-footer"
                         "contacto-footer"
                         "logos-footer";
  }

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

    .grid-contenedor-informacion-institucional {
      grid-template-columns: auto 460px auto; 
      grid-template-areas: "logos-footer institucional-footer contacto-footer";
    }
  }

  .logos-footer {
    grid-area: logos-footer;
  }

  .institucional-footer {
    grid-area: institucional-footer;
  }

  .contacto-footer {
    grid-area: contacto-footer;
  }

}

/* -> grid-contenedor-informacion-institucional */


/* grid-contenedor-logos-footer */

@supports(display: grid ) {

  .grid-contenedor-logos-footer {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "logo_gov_co logo_co";
    column-gap: 20px;
  }

  @media screen and (min-width: 1200px) {
    .grid-contenedor-logos-footer {
      grid-template-columns: 1fr; 
      grid-template-areas: "logo_gov_co"
                           "logo_co";
      column-gap: 0;
    }
  }

  .logo_gov_co {
    grid-area: logo_gov_co;
  }

  .logo_co {
    grid-area: logo_co;
  }

}

/* -> grid-contenedor-logos-footer */