/* grid-contenedor-contenido */

@supports(display: grid) {

  .grid-contenedor-contenido {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "opcion-seleccionada"
                         "franja-migas"
                         "seleccion-modulo"
                         "navegacion-modulos";
  }

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

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

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

  .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: minmax(100px, 240px);
    grid-gap: 32px;
    grid-auto-flow: row;

  }

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

    .grid-contenedor-navegacion-modulos {
      grid-template-columns: minmax(100px, 280px);
    }
  }

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

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

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

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

}

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

/* grid-contenedor-modulo */

@supports(display: grid) {

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

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

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

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

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

}

/* -> grid-contenedor-modulo */