body{
    width: 90%;
    max-width:800px;
    display:block;
}

@media only screen and (min-width: 640px) {
    body {
      background-color: #eaf6ff;
    }
  }

@media only screen and (max-width:500px) {
    h1{
        font-size:1.5rem;
    }
}

@media only screen and (min-width:640px) {
    h1{
        font-size:2.5rem;
    }
}

ul{
    display:flex;
    flex-wrap:wrap;
    list-style:none;
    margin: 1rem -10px 1rem -10px;
}

aside{
    width:170px;
    margin:10px;

}

#stretchable-grid-items li{
    width:100%;

}

#stretchable-grid-items aside{
    width:auto;

}

@media only screen and (min-width:480px) {
    #stretchable-grid-items li{
        width:50%;
    }
}


@media only screen and (min-width:640px) {
    #stretchable-grid-items li{
        width:25%;
    }
}