.gallery {

padding: 0.5rem;

display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;

}

.gallery figure {

margin: 1rem;

background-color: rgb(250, 250, 250);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);

/* This ensures that our figures never grow bigger than desired. */
flex-basis: 400px;

}

.gallery figure a {

display: block;
margin: 0.5rem;

}

.gallery img {

border: none;
display: block;

width: 100%;

}

.gallery figcaption {

display: block;
margin: 0.5rem;

font-size: 1rem;
text-align: center;

display: flex;
align-items: center;
justify-content: center;

/* The figure caption should have a minimum height, if there are multiple
lines of caption, the total size of the figure is likely to be the same as
others. */
min-height: 4rem;

}