/* make sure the images don't display at a higher resolution than the low-res version of the image */
figure {
    max-width: 500px;
}



/* get rid of the exterior margins on figure so they line up with everything else */

figure:first-of-type {
    margin-left: 0;
}

figure:last-of-type {
    margin-right: 0;
}



/* flex for the three reference images */

section:first-of-type div {
    display: flex;
    width: 100%;
    justify-content: center;
    
}

section:first-of-type figure {
    flex-basis: 33%;
}



/* match size of srcset image with reference images */

section:nth-of-type(2) figure {
    width: 32.5%;
    margin-left: auto;
    margin-right: auto;
}