repetitor/scss/_gallery.scss

.gallery_area{
    overflow: hidden;
    padding-top: 160px; 
    @media #{$mobile_device} {
        
        padding:60px 10px;
    }
    @media #{$tablet_device} {
        padding-top: 60px;
    }
    .single_gallery{
        // padding: 2px;
        position: relative;
        height: 500px;
        float: left;
        overflow: hidden;
        border-right: 8px solid#fff;
        border-bottom: 8px solid #fff;
        @media #{$mobile_device} {
           height: auto;
           border: none;
           margin-bottom: 10px;
        }
        @media #{$mobile_device} {
            height: 300px;
        }
        @media #{$mid_device} {
            height: 300px;
        }
        @media #{$tablet_device} {
            height: 300px;
        }
        a{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 12;
        }
        &:before{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            content: '';
            background: #BB8151;
            opacity: 0;
            @include transform(scale(.8));
            @include transition(.3s);
            z-index: 8;
        }
        img{
            width: 100%;
            height: 100%;
            @include transform(scale(1.1));
            @include transition(.3s);
        }
        &.small_img{
            width: 30%;
            @media #{$mobile_device} {
                width: 100%;
            }
            @media #{$tablet_device}{
                width: 50%;
            }
        }
        &.big_img{
           width: 40%;
           @media #{$mobile_device} {
            width: 100%;
        }
        @media #{$tablet_device}{
            width: 50%;
        }
           @media #{$mobile_device} {
               width: 100%;
           }
        }
        &:nth-child(3){
            // border-right: none;
        }
        &:nth-child(6){
            // border-right: none;
        }
        &:hover{
            &::before{
                opacity: .3;
                @include transform(scale(1.1));
            }
            img{ 
                @include transform(scale(1));

            }
        }
    }
}