/*Archivo css de Arhamis Santana Hernández*/
* {
  margin: 0px;
  padding: 0px;
}

body {
  display: grid;
  grid-template-areas:
    "a1 a1 a1 a1"
    "a2 a3 a3 a3"
    "a4 a4 a4 a4";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1%;
  margin: 1%;
}

header {
  background-color: green;
  text-align: center;
  grid-area: a1;
  border-radius: 10px;
}

nav {
  background-color: yellow;
  grid-area: a2;
  border-radius: 10px;
}

div {
  background-color: lightblue;
  color: white;
  border-radius: 10px;
}

p {
  margin: .3em;
}

section {
  grid-area: a3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0.3em;
}

footer {
  background-color: green;
  text-align: center;
  grid-area: a4;
  border-radius: 10px;
}

@media screen and (max-width: 936px) {
  body {
    display: grid;
    grid-template-areas:
      "a1 a1 a1 a1"
      "a2 a3 a3 a3"
      "a4 a4 a4 a4";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1%;
    margin: 1%;
  }

  header {
    background-color: green;
    text-align: center;
    grid-area: a1;
    border-radius: 10px;
  }

  nav {
    background-color: yellow;
    grid-area: a2;
    border-radius: 10px;
  }

  div {
    background-color: lightblue;
    color: white;
    border-radius: 10px;
  }

  p {
    margin: .3em;
  }

  section {
    grid-area: a3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.3em;
  }

  footer {
    background-color: green;
    text-align: center;
    grid-area: a4;
    border-radius: 10px;
  }
}

@media screen and (max-width: 600px) {
  body {
    display: grid;
    grid-template-areas:
      "a1 a1 a1 a1"
      "a2 a3 a3 a3"
      "a4 a4 a4 a4";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1%;
    margin: 1%;
  }

  header {
    background-color: green;
    text-align: center;
    grid-area: a1;
    border-radius: 10px;
  }

  nav {
    background-color: yellow;
    grid-area: a2;
    border-radius: 10px;
  }

  div {
    background-color: lightblue;
    color: white;
    border-radius: 10px;
  }

  p {
    margin: .3em;
  }

  section {
    grid-area: a3;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0.3em;
  }

  footer {
    background-color: green;
    text-align: center;
    grid-area: a4;
    border-radius: 10px;
  }
}

@media screen and (max-width: 480px) {
  body {
    display: grid;
    grid-template-areas:
      "a1 a1 a1 a1"
      "a2 a2 a2 a2"
      "a3 a3 a3 a3"
      "a4 a4 a4 a4";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1%;
    margin: 1%;
  }

  header {
    background-color: green;
    text-align: center;
    grid-area: a1;
    border-radius: 10px;
  }

  nav {
    background-color: yellow;
    grid-area: a2;
    border-radius: 10px;
  }

  div {
    background-color: lightblue;
    color: white;
    border-radius: 10px;
  }

  p {
    margin: .3em;
  }

  section {
    grid-area: a3;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0.3em;
  }

  footer {
    background-color: green;
    text-align: center;
    grid-area: a4;
    border-radius: 10px;
  }
}