image-grid {

    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: center;
    justify-content: center;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    align-items: center;
    justify-items: stretch;
    flex-wrap: wrap;
    background-color: #000000cc;

    & > img {
        max-height: 30vh;
        max-width: 25vw;
        min-height: 200px;
        object-fit: contain;
        cursor: pointer;
        border: solid 1px transparent;

        &:not([loaded]) {
            background-image: url("../../images/loader.svg");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: auto;
        }

        &:hover {
            border: solid 1px canvas;
            border-color: var(--hover-color, rgb(128, 230, 255));
            box-shadow: 0 0 20px 1px var(--hover-color,  rgb(128, 230, 255));
        }
    }

    @media (max-width: 500px) {
        & > img {
            max-width: 25vh;
        }
    }
}