img { max-width: 100%; }

body{
    margin-left: auto; 
    margin-right: auto;
    width: 90%;
    max-width: 800px;
}

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

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

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

  #fixed-size-grid-items aside{
    width:170px;
    margin:10px;
    font-size:0.8rem;
  }

  ul {
    display:flex;
    flex-wrap:wrap;
    list-style-type: none;
    padding-left: 0;
  }

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

  #stretchable-grid-items aside{
    margin:10px;
    font-size:0.8rem;
  }

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

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