.brand-area{
    padding-top: 30px;
    &-image{
        img{
            cursor: pointer;
            filter: grayscale(100%);
            opacity: 0.2;
            transition: 0.3s all linear;
            margin: auto;
            &:hover{
                filter: grayscale(0%);
                opacity: 1;
            }
        }
    }
}
// Responsive
// large devices 992px - 1169px
@media (min-width: 992px) and (max-width: 1200px) {

}

// Medium devices 768px - 991px
@media (min-width: 768px) and (max-width: 991px) {
}

// Small devices 575px - 767px
@media (min-width: 575px) and (max-width: 767px) {
    .brand-area{
        &-image{
            margin-bottom: 10px;
        }
    }
}

// Small devices 420px - 574px
@media only screen and (min-width: 420px) and (max-width: 574px) {
    
}

// extra Small devices 420px
@media (max-width: 420px) {
   
}