panda.css

.pandas{
  display: grid;
  background-color: #ff6666;
  grid-template-rows: 200px 400px 300px 400px 200px 300px;;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "header header header header header header"
                       "main1 main1 main1 main1 main1 main1"
                       "main2 main2 main2 main2 main2 main2"
                       "main3 main3 main3 main3 main3 main3"
                       "main4 main4 main4 main4 main4 main4"
                      "footer footer footer footer footer footer";
  grid-gap: 10px;
}

header {
  grid-area: header;
  color: white;
}

.navbar{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}
main1 {
  grid-area: main1;
  background-image: url("img/uno.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}



main2 {
  grid-area: main2;
  background-color: #1aff66;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text{

  width: 250px;
  height: 250px;
  background-color: #ff6666;
  color: white;
  }
main3 {
  grid-area: main3;
  background-image: url("img/dos.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}


main4 {
  grid-area: main4;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.pictures{
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  background-color: #1aff66;
}

.images {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: #1aff66;
}
 footer{
  grid-area: footer;
  background-image: url("img/tres.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  }

  @media screen and (max-width: 480px) {
    .pandas {
      grid-template-rows:300px 300px 300px 300px 300px 300px;
      grid-template-columns: 1fr;
      grid-template-areas: "header"
                           "main1"
                           "main2"
                           "main3"
                           "main4"
                           "footer";
    }
  }