@supports(display: grid ) {
  .grid-contenedor-contenido {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "panel-gestor"
						 "contenedor-buscador-index"
                         "seleccion-modulo"
                         "navegacion-modulos"
                         "seleccion-modulo-auxiliar"
                         "navegacion-modulos-auxiliar";
  }

  .panel-gestor {
    grid-area: panel-gestor;
  }

  .contenedor-buscador-index {
    grid-area: contenedor-buscador-index;
  }

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

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

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

  .navegacion-modulos-auxiliar {
    grid-area: navegacion-modulos-auxiliar;
  }
}

@supports(display: grid ) {
  .grid-contenedor-navegacion-modulos,
  .grid-contenedor-navegacion-modulos-auxiliar {
    display: grid;
    grid-template-columns: minmax(100px, 322px); 
    grid-gap: 20px;
    grid-auto-flow: row;
    justify-content: center;
  }

  @media screen and (min-width: 768px) {
    .grid-contenedor-navegacion-modulos,
    .grid-contenedor-navegacion-modulos-auxiliar {
      grid-template-columns: repeat(2, minmax(100px, 322px)); 
    }
  }

  @media screen and (min-width: 1200px) {
    .grid-contenedor-navegacion-modulos,
    .grid-contenedor-navegacion-modulos-auxiliar {
      grid-template-columns: repeat(3, minmax(100px, 322px)); 
    }
  }
}

@supports(display: grid ) {
  .grid-contenedor-modulo {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr;
    grid-template-areas: "imagen-modulo"
                         "titulo-modulo"
                         "descripcion-modulo";
  }

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

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

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

@media screen and (min-width: 768px) {
  .titulo-principal {
    font-size: var(--letraTituloH1PrincipalNormal);
    margin-top: 30px;
  }
}

@media screen and (min-width: 768px) {
  .titulo-auxiliar {
    font-size: var(--letraTituloH2AuxiliarNormal);
    margin-bottom: 30px;
  }
}

@media screen and (min-width: 768px) {
  .titulo-modulo {
    font-size: var(--letraTituloModuloNormal);
  }
}

@media screen and (min-width: 768px) {
  .descripcion-modulo {
    font-size: var(--letraDescripcionModuloNormal);
  }
}

@media screen and (max-width: 499px) {
  .navegacion-modulos {
    padding: 0;
    margin-bottom: -60px;
  }

  .grid-contenedor-navegacion-modulos {
    justify-content: center;
    grid-gap: 0;
  }

  .modulo {
    transform: scale(0.8);
    margin-right: 15px;
  }

  .modulo:hover {
    transform: scale(0.9);
  }
}

@media screen and (max-width: 339px) {
  .grid-contenedor-navegacion-modulos {
    justify-content: flex-start;
  }
}