/* grid-contenedor-header */

@supports(display: grid) {

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

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

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

/* -> grid-contenedor-header */


/* grid-contenedor-franja-jep */

@supports(display: grid) {

  .grid-contenedor-franja-jep {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "escudo-logojep"
                         "logo-jurinfo"
                         "usabilidad-jep"
                         "boton-buscar-header"
                         "redes-jep";
    grid-row-gap: 15px;
  }

  @media screen and (min-width: 768px) {
    .grid-contenedor-franja-jep {
      grid-template-columns: 1fr 0.6fr 1fr;
      grid-template-areas: "escudo-logojep escudo-logojep logo-jurinfo"
                           "usabilidad-jep boton-buscar-header redes-jep";
      grid-gap: 20px;
    }
  }

  @media screen and (min-width: 1440px) {
    .grid-contenedor-franja-jep {
      grid-template-columns: auto auto auto auto auto;
      grid-template-areas: "escudo-logojep logo-jurinfo usabilidad-jep boton-buscar-header redes-jep";
      grid-gap: 20px;
    }
  }

  .escudo-logojep {
    grid-area: escudo-logojep;
  }

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

  .usabilidad-jep {
    grid-area: usabilidad-jep;
  }

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

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

/* -> grid-contenedor-franja-jep */


/* 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-escudo-logojep */

@supports(display: grid ) {

  .grid-contenedor-escudo-logojep {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "escudo logo-jep";
    grid-column-gap: 10px;
  }

  @media screen and (min-width: 768px) {
    .grid-contenedor-escudo-logojep {
      grid-column-gap: 20px;
    }
  }

  .escudo {
    grid-area: escudo;
  }

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

}

/* -> grid-contenedor-escudo-logojep */


/* 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: 1140px) {
    .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 */