/* if you want to center text with this format */
/*
#exhibit .container { width: auto; text-align: center; }
#exhibit #product { margin: 0 auto; }
#exhibit #product .captioning,
#exhibit #product .textspace { text-align: left; }
*/

/* if you wish to constrain width of paragraphs, etc. */
/*
#exhibit #product #textspace { max-width: 750px; }
*/

/* use this if you wish to constrain width of text/image */
#exhibit #product 
{ 
    max-width: 1100px; 
    display: flex; 
    justify-content: flex-start; 
    align-items: flex-start; 
    flex-flow: row;
}
#exhibit #product #img-container 
{ 
    flex: 1 1 60%;
    /* padding: 0 54px; */
}
#exhibit #product .textspace 
{ 
    margin: 0 2em;
    flex: 1 1 40%;
    position: -webkit-sticky;
    position: sticky; 
    top: 0; 
}


#exhibit #product .asset-holder { width: 100%; line-height: 0; }
/* "width" forces width - "max-width" only allows max width of image but it scalable */
#exhibit #product .asset-holder .asset img { max-width: 100%; height: auto; width: 100%; }

/* you can fully adjust all of these but remember that they add up together */
#exhibit #product .spacer { margin-bottom: 3vmin; /* height: 50px; */ }
#exhibit #product .captioning { margin-top: 6px; line-height: 1.3em; font-size: 14px; }
#exhibit #product .title { display: inline-block; margin-right: 0.2em; }
#exhibit #product .caption { display: inline-block; }
#exhibit #product .caption p { margin-bottom: 0; }

/* video - probably don't need to touch these */
#exhibit #product .asset-holder .asset .youtube,
#exhibit #product .asset-holder .asset .vimeo { position: relative; width: 100%; }
#exhibit #product .asset-holder .asset .youtube:after,
#exhibit #product .asset-holder .asset .vimeo:after { padding-bottom: 65.5%; display: block; content: ''; }
#exhibit #product .asset-holder .asset .youtube iframe,
#exhibit #product .asset-holder .asset .vimeo iframe  
{ 
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 8; 
}

#exhibit #product .asset-holder .asset .mp4 { position: relative; width: 100%; }
#exhibit #product .asset-holder .asset .mp4 video { width: 100%; height: 100%; }


@media only screen and (max-width: 900px)  
{
    #exhibit #product 
    { 
        flex-flow: column;
    }
    #exhibit #product #img-container 
    { 
        flex: 1 1 100%;
    }
    #exhibit #product .textspace 
    { 
        position: relative;
        margin: 2em 0;
        flex: 1 1 100%; 
    }
}