/* Flex version
div.gallery {
    background-color: #464646;
    padding: 0.6em;
    border-radius: .5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

div.gallery > img {
    padding: 0.2em;
    max-width: 20vw;
    max-height: 20vw;
    flex-grow: 1;
    object-fit: contain;
}

div.gallery::after {
    content: "";
    flex: auto;
}
*/

/* Grid version */
div.gallery {
    background-color: #767676;
    padding: 0.6em;
    border-radius: .5em;
    display: grid;
    grid-gap: .3em;
    grid-template-columns: repeat(auto-fill, minmax(min(196px,20vw), 1fr));
    justify-items: center;
    align-items: center;
}

div.gallery > img {
    max-width: 20vw;
    max-height: 20vw;
    object-fit: contain;
}

@media screen and (min-device-width: 800px) {
    div.gallery {
        grid-gap: 1.5em;
    }
}

/* Outside element */

body > div.gallery {
    margin: .2em;
    margin-top: 1em;
}
@media screen and (min-device-width: 800px) {
    body > div.gallery {
        margin: 2em;
    }
}