* {
  margin: 0;
  padding: 0;
  font-size: 100%;
}
body {
  display: grid;
  grid-template-areas:"c1 c1 c1 c1"
                      "c2 c3 c3 c3"
                      "c6 c6 c6 c6";
 grid-template-columns: 0.5fr 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 0.5fr;
 margin: 0.5%;

}
header {
  background-color: green;
  border-radius: 10px;
  width: 100%;
  text-align: center;
  grid-area: c1;
}
ul {
  background-color: yellow;
  border-radius: 10px;
  grid-area: c2;
  grid-gap: 0.5%;
  margin: 0.7%;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
 section {
   display: grid;
   grid-template-areas: "z1 z2 z3";
   grid-gap: 0.5%;
   padding: 0.25%;
   grid-area: c3;
 }
 div {
   background-color: lightblue;
   color: white;
   border-radius: 10px;
 }


footer {
  background-color: green;
  text-align: center;
  border-radius: 10px;
  grid-area: c6;
  margin-top: 1%;
}
@media screen and (max-width: 936px) {

  body {
    display: grid;
    grid-template-areas: /* Pasamos de 4 columnas a 3 columnas. */
      "c1 c1 c1"
      "c2 c3 c3"
      "c6 c6 c6" ;
    grid-template-columns: 0.3fr 1fr 1fr;
    grid-template-rows: 0.5fr 1fr 0.3fr;
    grid-gap: 0.5%;
  }
  section {
    display: grid;
    grid-template-areas: "z1 z2";
    grid-template-columns: 1fr 1fr;
    grid-gap: 3%;
  }
  h1 {
    font-size: 2em; /*Diseño responsive del tamaño de fuente. */
  }
  h2 {
    font-size: 1.2em; /*Diseño responsive del tamaño de fuente. */
  }
}

@media screen and (max-width: 600px) {

  body {
    display: grid;
    grid-template-areas: /* Pasamos de 3 columnas a 2 columnas. */
      "c1 c1"
      "c2 c3"
      "c6 c6" ;
    grid-template-columns: 0.3fr 1fr ;
    grid-template-rows: 0.5fr 1fr 0.3fr;
    grid-gap: 0.5%;
  }
  section {
    display: grid;
    grid-template-areas: "z1";
    grid-template-columns: 1fr;
    grid-gap: 1.5%;
  }
  h1 {
    font-size: 2em; /*Diseño responsive del tamaño de fuente. */
  }
  h2 {
    font-size: 1.2em; /*Diseño responsive del tamaño de fuente. */
  }
}

@media screen and (max-width: 480px) {

  body {
    display: grid;
    grid-template-areas: /* Pasamos de 2 columnas a 1 columnas. */
      "c1 "
      "c2 "
      "c3"
      "c6 " ;
    grid-template-columns: 1fr ;
    grid-template-rows: 0.5fr 0.3fr 0.3fr 0.3fr;
    grid-gap: 0.5%;
  }
  section {
    display: grid;
    grid-template-areas: "z1";
    grid-template-columns: 1fr;
    grid-gap: 1.5%;
  }
  h1 {
    font-size: 2em; /*Diseño responsive del tamaño de fuente. */
  }
  h2 {
    font-size: 1.2em; /*Diseño responsive del tamaño de fuente. */
  }
}