& when (@media-common = true) {   
    .ox-categories-grid-with-banner{
        .ox-banner.bg-image{
            position:absolute;
        }
        .col{
            &.right{
                padding: 30px 3%;
            }
            &.left,
            &.right{

                flex: 0 0 100%;
                max-width: 100%;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__sm) {

    .ox-categories-grid-with-banner{
        .ox-banner{
            &.bg-image{
                position:relative;
                background-position: center;
                min-height:450px;
            }
            &.ox-banner-content-overlay {
                .ox-banner-container{
                    padding: 60px;
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__sm) {
    .ox-categories-grid-with-banner{
        .ox-banner{
            background-position: bottom;
        }
        .col{
            &.right{

                flex: 0 0 60%;
                max-width: 60%;
            }
            &.left{

                flex: 0 0 40%;
                max-width: 40%;
            }
        }
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .ox-categories-grid-with-banner{
        .ox-banner{
            &.ox-banner-content-overlay {
                .ox-banner-container{
                    padding: 60px;
                }
            }
        }
        .col{
            &.right{

                flex: 0 0 70%;
                max-width: 70%;
                padding: 50px 3%;
            }
            &.left{

                flex: 0 0 30%;
                max-width: 30%;
            }
        }
    }
}