body {
  margin: 30px;
  font-family:'Times New Roman', Times, serif;
}

header {
  background: #5ee797;
  display: grid;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  grid-template-rows: 50px;
  border: 1px solid #777;
}

h1 {
  text-align: center;
  margin: 0 auto;
  background: #95c7f7;
  display: grid;
  grid-template-rows: 250px;
  border: 1px solid #777;
  width: 80%;
}

nav{
  background: #fd8b8b;
  display: grid;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 50px;
  border: 1px solid #777;
}

nav > div {
  border: 1px solid #777;
}

.wrapper {
  background: #eee;
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 300px);
  gap: 10px;
}

.wrapper > div {
  background: #ccc;
  text-align: center;
  padding: 20px;
  border: 1px solid #777;
}

.wrapper > div:nth-child(1) {
  grid-column: 1 / span 3
}

.wrapper > div:nth-child(2) {
  grid-column: span 2
}

.wrapper > div:nth-child(3) {
  grid-column: span 2
}

.wrapper > div:nth-child(4) {
  grid-column: span 3
}

.wrapper > div:nth-child(5) {
  grid-column: span 3
}

.wrapper > div:nth-child(6) {
  grid-column: span 2
}

footer {
  background: #5ee797;
  display: grid;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  grid-template-rows: 50px;
  border: 1px solid #777;
}