$gap: 1em;

.gallery {
    display: flex;
    justify-content: stretch;
    align-content: stretch;
    align-items: stretch;
    flex-flow: row wrap;
    gap: $gap;
    padding: 1em;
    height: 100%;

    .img-wrapper {
        position: relative;
        transition: all 0.2s;
        user-select: none;
        border: 3px solid transparent;
        cursor: pointer;

        &:hover {
            transform: scale(1.05);

            span {
                display: block;
            }
        }

        img {
            max-width: calc(min(100vw - #{$gap}, 100%));
            max-height: 20em;
            box-shadow: -1px 1px 8px 0px black;
        }

        span {
            display: none;
            position: absolute;
            background-color: rgb(26 26 26 / 66%);
            color: white;
            font-size: 0.7em;
            bottom: 0.4em;
            left: 0;
        }

        &.selected {
            border-color: darkblue;
        }
    }
}