@ratio-16x9: (9%/16%*100%);
@ratio-9x16: (16%/9%*100%);
@ratio-4x3: (3%/4%*100%);
@ratio-3x4: (4%/3%*100%);
@ratio-1x1: (100%);

.responsive-ratio when (@responsive-video){
    position : relative;
    overflow : hidden;
    padding  : 0;
    display  : block;
    height   : auto !important;

    &:before{
        display : block;
        content : " ";

        ._16x9&{ padding-bottom : @ratio-16x9; }
        ._9x16&{ padding-bottom : @ratio-9x16; }

        ._4x3&{ padding-bottom : @ratio-4x3; }
        ._3x4&{ padding-bottom : @ratio-3x4; }

        ._1x1&{ padding-bottom : @ratio-1x1; }
    }

    & when (@responsive-video){
        iframe, object, embed, video{
            position : absolute;
            top      : 0;
            left     : 0;
            width    : 100%;
            height   : 100%;
        }
    }

    & when (@responsive-image){
        & > img{
            position   : absolute !important;
            top        : 0;
            left       : 0;
            bottom     : 0;
            right      : 0;
            margin     : auto;
            min-height : 100% !important;
            min-width  : 100% !important;
            width      : auto;
            height     : auto;
        }

        &.bottom{
            & > img{
                min-height : 0 !important;
                top        : auto;
            }

            ._lbox, .gall{
                & img{
                    &:extend(.responsive-ratio.bottom>img);
                }
            }
        }

        &.top{
            & > img{
                min-height : 0 !important;
                bottom     : auto;
            }

            ._lbox, .gall{
                & img{
                    &:extend(.responsive-ratio.top>img);
                }
            }
        }

        ._lbox, .gall{
            & img{
                &:extend(.responsive-ratio>img);
            }
        }
    }
}