html {
   background-color: rgb(239, 192, 206);
}

h1 {
   color: rgb(212, 39, 91);
   text-align: center;
   background-color: rgb(181, 209, 209);
   padding: 30px;
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 35px;
}

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

hr {
   border-color: rgb(6, 6, 6);
}
.container{
   display: grid;
   grid-template-areas: 
   'header header header header header header'
   'pg pg pg pg pg pg '
   'img img img img img img';
}
.item1{
   grid-area: header;
}
.item2{
   grid-area: pg;
}
.item3{
   grid-area: img;
}
@media only screen and (max-width:600px) {
   .item1{
     grid-area: 1/span 6; 
   }
   .item2{
      grid-area: 2/span 6;
   }
   .item3>img{
      max-width: 100%;
      height: auto;
   }
}