/* Fancy image gallery */

/* A hint telling the user to tap to open in a new tab */
#gallery #hint {
    color: gray;

    text-align: center;
    font-style: italic;

    padding-top: 1em;
}

#gallery figure {
    background-color: rgb(234, 234, 234);

    float: left;

    /*    width         margin   4-images */
    /* 20 * 4 = 80 + (2.5 * 4 * 2) = 100  */
    width: 20%;

    /* Not 2.5% for borders */
    margin: 1em 2.3%;

    border: 1px solid black;
}
#gallery figure a {
    color: black;

    font-size: 85%;
    font-weight: bold;
}
#gallery figure :hover, :focus {
    text-decoration: none;

    color: rgb(255, 65, 65);
}
#gallery figure img {
    /* Can't remember why, but this makes images properly fit in the border */
    display: block;
    
    width: 100%;
    height: auto;

    /* Cropping */
    aspect-ratio: 1;
    object-fit: cover;
}

#gallery figcaption {
    /* Overflow the text, and hide it behind elipses */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    text-align: center;

    padding: .5em 1em;

    border-top: 1px solid black;
}


@media only screen and (max-width: 768px) {
    #gallery figure a {
        font-size: 65%;
    }
}

@media only screen and (max-width: 620px) {
    #gallery {
        margin: auto;
        width: 95%;
    }
    
    #gallery figure {
        width: 95%;
        margin: .5em 2%;
    }
}