/* grid-contenedor-header */

@supports(display: grid) {

  .grid-contenedor-header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "franja-usabilidad-header"
                         "franja-defensoria"
                         "franja-menu-institucional";
  }

  .franja-usabilidad-header {
    grid-area: franja-usabilidad-header;
  }

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

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

/* -> grid-contenedor-header */


/* grid-contenedor-franja-usabilidad-header */

@supports(display: grid) {

  .grid-contenedor-franja-usabilidad-header {
    display: grid;
    grid-template-columns: 0fr 12fr 0fr;
    grid-template-areas: "left-panel-franja-usabilidad-header contenido-franja-usabilidad-header right-panel-franja-usabilidad-header";
  }

  @media screen and (min-width: 1140px) {
    .grid-contenedor-franja-usabilidad-header {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-franja-usabilidad-header {
    grid-area: contenido-franja-usabilidad-header;
  }

  .left-panel-franja-usabilidad-header {
    grid-area: left-panel-franja-usabilidad-header;
  }

  .right-panel-franja-usabilidad-header {
    grid-area: right-panel-franja-usabilidad-header;
  }
}

/* -> grid-contenedor-franja-usabilidad-header */


/* grid-contenedor-herramientas-usabilidad */

@supports(display: grid) {

  .grid-contenedor-herramientas-usabilidad {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "font-size-buttons"
                         "JAWS-zoomtext"
                         "centro-de-relevo-separador";
    grid-column-gap: 4px;
  }

  @media screen and (min-width: 350px) {
    .grid-contenedor-herramientas-usabilidad {
      display: grid;
      grid-template-columns: 149px 164px;
      grid-template-areas: "font-size-buttons JAWS-zoomtext"
                           "centro-de-relevo-separador centro-de-relevo-separador";
      grid-column-gap: 4px;
    }
  }

  @media screen and (min-width: 576px) {
    .grid-contenedor-herramientas-usabilidad {
      display: grid;
      grid-template-columns: 149px 164px 173px; /* 44px 4px 44px 4px 44px 4px 5px, 80px 4px 5px 4px 62px 4px 5px, 168px 5px */
      grid-template-areas: "font-size-buttons JAWS-zoomtext centro-de-relevo-separador";
    }
  }

  .font-size-buttons {
    grid-area: font-size-buttons;
  }

  .JAWS-zoomtext {
    grid-area: JAWS-zoomtext;
  }

  .centro-de-relevo-separador {
    grid-area: centro-de-relevo-separador;
  }

}

/* -> grid-contenedor-usabilidad-menu */


/* grid-contenedor-franja-defensoria */

@supports(display: grid) {

  .grid-contenedor-franja-defensoria {
    display: grid;
    grid-template-columns: 0 1fr 0;
    grid-template-areas: "left-panel-franja-defensoria contenido-franja-defensoria right-panel-franja-defensoria";
  }

  @media screen and (min-width: 1140px) {
    .grid-contenedor-franja-defensoria {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

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

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

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

/* -> grid-contenedor-franja-defensoria */


/* grid-contenedor-franja-menu-institucional */

@supports(display: grid) {

  .grid-contenedor-franja-menu-institucional {
    display: grid;
    grid-template-columns: 0 12fr 0;
    grid-template-areas: "left-panel-franja-menu-institucional contenido-franja-menu-institucional right-panel-franja-menu-institucional";
  }

  @media screen and (min-width: 1140px) {
    .grid-contenedor-franja-menu-institucional {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

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

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

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

/* -> grid-contenedor-franja-menu-institucional */


/* grid-contenedor-font-size-buttons */

@supports(display: grid) {

  .grid-contenedor-font-size-buttons {
    display: grid;
    grid-template-columns: 44px 44px 44px 5px;
    grid-template-areas: "decrease-font-size reset-font-size increase-font-size separador-font-size";
    grid-column-gap: 4px;
  }

  .decrease-font-size {
    grid-area: decrease-font-size;
  }

  .reset-font-size {
    grid-area: reset-font-size;
  }

  .increase-font-size {
    grid-area: increase-font-size;
  }

  .separador-font-size {
    grid-area: separador-font-size;
  }

}

/* -> grid-contenedor-font-size-buttons */


/* grid-contenedor-JAWS-zoomtext */

@supports(display: grid) {

  .grid-contenedor-JAWS-zoomtext {
    display: grid;
    grid-template-columns: 80px 5px 62px 5px;
    grid-template-areas: "img-JAWS separador-img-JAWS img-zoomtext separador-img-zoomtext";
    grid-column-gap: 4px;
  }

  .img-JAWS {
    grid-area: img-JAWS;
  }

  .separador-img-JAWS {
    grid-area: separador-img-JAWS;
  }

  .img-zoomtext {
    grid-area: img-zoomtext;
  }

  .separador-img-zoomtext {
    grid-area: separador-img-zoomtext;
  }

}

/* -> grid-contenedor-JAWS-zoomtext */


/* grid-contenedor-centro-de-relevo-separador */

@supports(display: grid) {

  .grid-contenedor-centro-de-relevo-separador {
    display: grid;
    grid-template-columns: 168px 5px;
    grid-template-areas: "centro-de-relevo separador-centro-de-relevo";
    grid-column-gap: 4px;
  }

  .centro-de-relevo {
    grid-area: centro-de-relevo;
  }

  .separador-centro-de-relevo {
    grid-area: separador-centro-de-relevo;
  }
}

/* -> grid-contenedor-centro-de-relevo-separador */


/* grid-contenedor-logodefensoria-buscador-redes */

@supports(display: grid) {

  .grid-contenedor-logodefensoria-buscador-redes {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "logo-titulo"
                         "boton-buscar-header"
                         "redes-defensoria";
    grid-row-gap: 15px;
  }

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

    .grid-contenedor-logodefensoria-buscador-redes {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "logo-titulo boton-buscar-header"
                           "logo-titulo redes-defensoria";
      grid-gap: 20px;
    }
  }

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

  .boton-buscar-header {
    grid-area: boton-buscar-header;
  }

  .redes-defensoria {
    grid-area: redes-defensoria;
  }

}

/* -> grid-contenedor-logodefensoria-buscador-redes */


/* grid-contenedor-menu-institucional */

@supports(display: grid ) {

  .grid-contenedor-menu-institucional {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "icono-menu-franja-menu-institucional"
                         "menu-vertical-franja-menu-institucional";
    grid-column-gap: 10px;
  }

  @media screen and (min-width: 768px) {
    .grid-contenedor-menu-institucional {
      grid-template-columns: 1fr;
      grid-template-areas: "menu-horizontal-franja-menu-institucional";
    }
  }

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

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

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

}

/* -> grid-contenedor-menu-institucional */