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

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

/* use this if you wish to constrain width of text/image */
#exhibit #over_and_over { 
    /* max-width: 1100px; /* contains width overall */
    display: flex; 
    justify-content: flex-start; 
    align-items: flex-start; 
    flex-direction: row-reverse; 
    gap: 2em; 
}
#exhibit #over_and_over #img-container { flex: 1 1 68%; }
#exhibit #over_and_over #textspace { 
    flex: 1 1 32%; 
    top: 27px; 
    position: -webkit-sticky;
    position: sticky;
}
#exhibit #over_and_over .asset-holder { width: 100%; line-height: 0; }
/* "width" forces width - "max-width" only allows max width of image but it scalable */
#exhibit #over_and_over .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 #over_and_over .spacer { margin-bottom: 3vmin; /* height: 50px; */ }
#exhibit #over_and_over .captioning { margin-top: 6px; line-height: 1.3em; }
#exhibit #over_and_over .title {  }
#exhibit #over_and_over .caption {  }

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

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

@media only screen and (max-width: 900px)  
{
    #exhibit #over_and_over { flex-direction: column; gap: 2em; }
    #exhibit #over_and_over #img-container { flex: 1 1 auto; }
    #exhibit #over_and_over #textspace { flex: 1 1 auto; position: relative; }
}