/* ####################################
   Simple Thumbnail Image Gallery

   - Critical Rendering Path: Optional
   ################################## */

.thumbnailImages {
    /* Could style this, but if we don't then authors can use layout classnames on the containing div more easily. */
    text-align: center;
}

    .thumbnailImages .thumbnail {
        display: inline-block;
        max-width: calc(100% - 20px); /* 100% minus the margin. */
        margin: 0 10px 0 0 !important; /* Some layout classes such as .box will enforce margin rules on the last or first element if we don't apply !important. */
    }

        .thumbnailImages .thumbnail > a,
        .thumbnailImages .thumbnail > img {
            /* Thumbnails may or may not be displayed inside anchor tags. */
            display: block;
            max-width: calc(100% - 2px); /* 100% minus the border. */
            border-color: var(--site-spot-color-13);
            border-width: 2px;
            border-style: solid;
            transition: 150ms all ease-in-out;
        }

        .thumbnailImages .thumbnail a img {
            display: block;
            max-width: 100%;
        }

        .thumbnailImages .thumbnail a:hover {
            border: var(--site-spot-color-8) 2px solid;
        }

            .thumbnailImages .thumbnail a:hover::after {
                content: "";
            }