@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-ratio) {
    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;

            ._9x16&,
            ._3x4&,
            ._1x1& {
                max-width : none;
                left      : 50%;
                .translate(-50%; 0)
            }
        }

        &.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);
            }
        }
    }
}