/* grid-contenedor-contenido */

@supports(display: grid ) {

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

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

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

  .go-back {
    grid-area: go-back;
  }

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

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

/* -> grid-contenedor-contenido */


/* grid-contenedor-opcion-seleccionada */

@supports(display: grid ) {

  .grid-contenedor-opcion-seleccionada {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "titulo-opcion-seleccionada"
                         "explicacion-opcion-seleccionada"
                         "descripcion-opcion-seleccionada";
    grid-gap: 10px;
  }

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

    .grid-contenedor-opcion-seleccionada {
      grid-template-columns: auto 117px 147px;
      grid-template-areas: "titulo-opcion-seleccionada boton-compartir boton-imprimir"
                           "explicacion-opcion-seleccionada boton-compartir boton-imprimir"
                           "descripcion-opcion-seleccionada descripcion-opcion-seleccionada descripcion-opcion-seleccionada";
    }

  }

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

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

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

  .boton-compartir {
    grid-area: boton-compartir;
  }

  .boton-imprimir {
    grid-area: boton-imprimir;
  }
}

/* -> grid-contenedor-opcion-seleccionada */


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

@supports(display: grid ) {

  .grid-contenedor-navegacion-nuevas-opciones {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10px;
    grid-auto-flow: row;
  }

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

    .grid-contenedor-navegacion-nuevas-opciones {
      grid-gap: 20px;
    }
  }

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

    .grid-contenedor-navegacion-nuevas-opciones {
      grid-gap: 30px;
    }
  }

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

    .grid-contenedor-navegacion-nuevas-opciones {
      grid-template-columns: 1170px;
    }
  }

}

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


/* grid-contenedor-opcion-nueva */

@supports(display: grid ) {

  .grid-contenedor-opcion-nueva {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 62px auto 56px;
    grid-template-areas: "imagen-opcion-nueva titulo-opcion-nueva ver-mas-opcion-nueva";
  }

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

    .grid-contenedor-opcion-nueva {
      grid-gap: 13px;
      grid-template-columns: 62px auto 137px;
      grid-template-areas: "imagen-opcion-nueva titulo-opcion-nueva ver-mas-opcion-nueva";
    }
  }

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

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

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

}

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