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

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

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

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

#fixed-size-grid-items ul { display: flex; flex-wrap: wrap; list-style-type: none; font-size: 0.8rem; padding: 0; }

#fixed-size-grid-items ul li { display: block; }

#fixed-size-grid-items ul li aside { width: 170px; margin: 10px; }

#stretchable-grid-items ul { display: flex; flex-wrap: wrap; padding: 0; list-style-type: none; font-size: 0.8rem; margin: 1rem -10px; }

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

@media (min-width: 480px) {
    #stretchable-grid-items ul li { width: 50%; }
}
@media (min-width: 640px) {
    #stretchable-grid-items ul li { width: 25%; }
}
#stretchable-grid-items ul li aside { margin: 10px; }