.container {
  display: grid;
  grid-template-areas:
    "header header header header"
    "hero hero hero hero"
    "pone ptwo pthree pfour"
    "pone ptwo pthree pfour"
    "pone ptwo pthree pfour"
    "footer footer footer footer"
    ;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 3fr 4fr 1fr;
  gap: 3px;
  background-color: rgb(70, 114, 83);
  padding: 5px;
}


.container div {
  background-color: rgb(164, 198, 174);
  padding: 10px;
}


.container div.header {
  grid-area: header;
  font-family:fantasy;
  text-align: center;
  font-size: 30px;
}

.container div.hero {
  display: grid;
  grid-area: hero;
  justify-content: center;
}

.dog{
  width: 500px;
  
}

.container div.pone {
  grid-area: pone;
  font-family:'Segoe UI', Tahoma, sans-serif;
}

.container div.ptwo {
  grid-area: ptwo;
  font-family:'Segoe UI', Tahoma, sans-serif;
}

.container div.pthree {
  grid-area: pthree;
  font-family:'Segoe UI', Tahoma, sans-serif;
}

.container div.pfour {
  grid-area: pfour;
  font-family:'Segoe UI', Tahoma, sans-serif;
}

.container div.footer {
  grid-area: footer;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  text-align: center;
}

h1{
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}