
#img-container {
    display: grid;
    grid-gap: 3.5vmin 3.5vmin; /* bottom margin / column margin */
    /* max-width: 1200px; */
}

#img-container .asset-holder { }

#img-container  .asset-holder .asset {
    position: relative;
    max-width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center; /* or bottom center */ 
} 

#img-container .asset-holder .asset:after {
    content: '';
    display: block;
}

#exhibit #img-container .asset-holder .asset a.link {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    display: block;
}
#exhibit #img-container .asset-holder .asset a.link:hover {
    /* background-color: rgba(0,0,0,0.8); */
}

/* adjust this to change text justification */
#exhibit #img-container .asset-holder .asset-title {
    margin-top: 2vmin;
    text-align: center;
}
#exhibit #img-container .asset-holder .asset-title h3 {
    margin-bottom: 0;
}

/* restrain the width of paragraphs this way */
/* #exhibit #textspace { width: 900px; } */
#exhibit #textspace.above { margin-bottom: 3em; }
#exhibit #textspace.below { margin-top: 3em; }

/* natural & square */
#img-container.thumbshape-0 .asset:after,
#img-container.thumbshape-1 .asset:after {
    padding-bottom: 100%;
}

/* 4x3 */
#img-container.thumbshape-2 .asset:after {
    padding-bottom: 75%;
}

/* 16:9 */
#img-container.thumbshape-3 .asset:after {
    padding-bottom: 56.25%;
}

@media only screen and (max-width: 700px)  
{
    #img-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }  
}