/* grid-contenedor-contenido */

@supports(display: grid ) {

  .grid-contenedor-contenido {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "opcion-seleccionada"
                         "navegacion-modulos-nuevas-opciones";
  }

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

    .grid-contenedor-contenido {
      grid-template-columns: 1140px;
    }
  }

  .opcion-seleccionada {
    grid-area: opcion-seleccionada;
  }

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

/* -> grid-contenedor-contenido */


/* grid-contenedor-navegacion-modulos-nuevas-opciones */

@supports(display: grid ) {

  .grid-contenedor-navegacion-modulos-nuevas-opciones {
    display: grid;
    grid-template-columns: 0 1fr 0;
    grid-template-areas: "left-panel-navegacion-modulos-nuevas-opciones contenido-navegacion-modulos-nuevas-opciones right-panel-navegacion-modulos-nuevas-opciones";
  }

  @media screen and (min-width: 1140px) {
    .grid-contenedor-navegacion-modulos-nuevas-opciones {
      grid-template-columns: 1fr 1140px 1fr;
    }
  }

  .contenido-navegacion-modulos-nuevas-opciones {
    grid-area: contenido-navegacion-modulos-nuevas-opciones;
  }

  .left-panel-navegacion-modulos-nuevas-opciones {
    grid-area: left-panel-navegacion-modulos-nuevas-opciones;
  }

  .right-panel-navegacion-modulos-nuevas-opciones {
    grid-area: right-panel-navegacion-modulos-nuevas-opciones;
  }
}

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


/* grid-contenedor-modulos-opciones-nuevas */

@supports(display: grid ) {

  .grid-contenedor-modulos-opciones-nuevas {
    display: grid;
    grid-template-columns: 250px;
    grid-gap: 50px;
    grid-auto-flow: row;
  }

  @media screen and (min-width: 768px) {
    .grid-contenedor-modulos-opciones-nuevas {
      grid-template-columns: repeat(2, 250px);
    }
  }

  @media screen and (min-width: 992px) {
    .grid-contenedor-modulos-opciones-nuevas {
      grid-template-columns: repeat(3, 250px);
    }
  }

/* -> grid-contenedor-modulos-opciones-nuevas */


/* grid-contenedor-modulo-opcion-nueva */

@supports(display: grid ) {

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

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

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

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

}

/* -> grid-contenedor-modulo-opcion-nueva */