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


@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{
    ul{
        list-style: none;
        padding-left:0;
        display: flex;
        flex-wrap: wrap;
    }

    aside{
        width:170px;
        font-size:0.8rem;
        margin:10px;
    }

}

#stretchable-grid-items{

 ul{
    list-style: none;
    padding-left:0;
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    }

     li{
        width: 100%;
    }

    aside{
    margin:10px;

    }

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

    @media (min-width: 640px) {
         li{
        width: 25%
    }
    }
}