#portrait{
    display:flex !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    font-size:0;
    box-sizing: border-box;

    .left{
        display: block;
        width:50%;
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img{
            width:calc(100% - 100px);
            max-width: 450px;
            height:auto;
            max-height:calc(100% - 100px);

            object-fit:contain;
            object-position:center;
            

            -webkit-transition:all 0.2s ease-out;
            transition:all 0.2s ease-out;
            -webkit-transform:scale(1);
            transform:scale(1);
        }

    }
    .right{
        width:50%;
        height:100%; 
        display: flex;
        justify-content: center;
        align-items: center;

        img{
            width:calc(100% - 40px);
            height:calc(100% - 40px);
            max-width: 700px;
            object-fit:contain;
            object-position:center left;
        }
    }
}


@media screen and (orientation: portrait){
    #portrait{
        flex-direction: column;

        .left, .right{
            width:100%;
        }
        .left{
            height:40%;

            img{
                width:100%;
                height:100%;
                object-fit:cover;
                max-width: none;
                max-height:none;
                object-position: top;
            }
        }
        .right{
            height:60%;

            img{
                width:100%;
                height:100%; 
            }
        }
    }
}