main2.css

body{
  margin: 0px;
}

.wrapper{
  display: grid;
  height: 650px;
  grid-template-columns: 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas: 'header'
                       'content';
}

header{
  grid-area: header;
  background-color: #FF009E;
}

.title{
  font-size: 28px;
  font-family: 'Bitter', serif;
  letter-spacing: 1.5px;
  text-align: center;
  color: white;
  margin: 10px;
}

main{
  grid-area: content;
}

.kitten{
  background: url('images/kitten-large.png') no-repeat center bottom, url('images/dawn.png') no-repeat;
  background-size: auto, cover;
  min-height: 300px;
  height: 600px;
}

@media screen and (max-width: 800px){
  .wrapper{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas: 'header'
                         'content';
  }

  .kitten{
     background: url('images/kitten-medium.png') no-repeat center bottom, url('images/sunny-day.jpg') no-repeat;
     background-size: auto, cover;
  }
}

@media screen and (max-width: 600px){
  .wrapper{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas: 'header'
                         'content';
  }
  .kitten{
    background: url('images/kitten-small.png') no-repeat center bottom, url('images/night.jpg') no-repeat;
    background-size: auto, cover;
  }
}