.pic-gallery
{
    /* background-color : red; */
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-evenly;   /* justify-content is for flex, justify-items is for grid */
    align-items : center;
    margin : 1em 0em;
}



.pic-gallery > div:has( video.landscape-vid ), .pic-gallery > div:has( video.portrait-vid )
{
    min-height : 50vh;
    align-self : top;
    display : flex;
    flex-direction : column;
    flex-wrap : wrap;
    justify-content : space-evenly;
    align-items : center;
    margin : 0em;
    background-color : yellow;
    padding : 1em;
}



.pic-gallery:has( picture )
{
    min-height : 50vh;
    display : flex;
    flex-direction : column;
    flex-wrap : nowrap;
    justify-content : space-evenly;
    align-items : center;
    margin : 0em;
    padding : 1em;
}



.pic-gallery:has( picture ):nth-child( 2n + 1 )
{
    background-color : rgb(255, 226, 193);
}



.pic-gallery:has( picture ):nth-child( 2n + 2 )
{
    background-color : transparent;
}



.pic-gallery > picture
{
    align-self : center;
    width : 100%;
    max-width : 800px;
} 




picture.document img
{
    width : 100%;
    height : auto;
    object-fit : cover;
    align-self : center;
    box-shadow : 0px 0px 5px rgba( 0, 0, 0, 1 );
    margin : 0.5em 0em;
} 



video
{
    align-self : center;
    box-shadow : 0px 0px 5px rgba( 0, 0, 0, 1 );
    margin : 1em 0em;
}



video.portrait-vid
{
    width : 100%;
    aspect-ratio : 9/16 auto;
}



video.landscape-vid
{
    width : 100%;
    aspect-ratio : 16/9 auto;
}




@media screen and ( min-width : 1024px ) 
{

    .pic-gallery > picture.document
    {
        width : 100%;
        align-self : center;
    }


    picture.document img
    {
        width : 100%;
        height : auto;
        aspect-ratio : 9/16 auto;
        object-fit : cover;
        align-self : center;
        box-shadow : 0px 0px 5px rgba( 0, 0, 0, 1 );
    } 



    video.portrait-vid
    {
        max-height : 75vh;
        width : auto;
    }



    video.landscape-vid
    {
        height : 70%;
        max-height : 70%;
        width : auto;
        aspect-ratio : 16/9 auto;
    }



}