.brand-wrapper {
    h6 {
        font-size: 14px;
        position: relative;
        margin-bottom: 50px;

        &::before {
            position: absolute;
            top: 10px;
            left: 35px;
            content: "";
            height: 1px;
            width: 480px;
            background-color: $border-color;

            @include breakpoint (max-xxl){
                display: none;
            }
        }

        &::after {
            position: absolute;
            top: 10px;
            right: 35px;
            content: "";
            height: 1px;
            width: 480px;
            background-color: $border-color;

            @include breakpoint (max-xxl){
                display: none;
            }
        }
    }

    .brand-image {
        text-align: center;
        filter: grayscale(100%);
        @include transition;

        &:hover {
            filter: initial;
        }
    }

    &.style-2 {
        .brand-carousel-active-2 {
            .slick-slide {
                margin: 0 15px;
            }
            
            .slick-list {
                margin: 0 -15px;
            }
        }

        .brand-image {
            padding: 30px 20px;

            @include breakpoint (max-md){
                padding: 30px 0;
            }

            img {
                text-align: center;
                margin: 0 auto;
            }

            &:hover {
                background-color: $white;
            }
        }
    }
}

.brand-wrapper-3 {
    padding: 70px 0; 
    border-bottom: 1px solid $border-color;

    .brand-image {
        text-align: center;
        filter: grayscale(100%);
        opacity: .3;
        @include transition;

        img {
            text-align: center;
            margin: 0 auto;
        }

        &:hover {
            filter: initial;
            opacity: 1;
        }
    }
}

.brand-section-2 {
    padding: 80px 0;
    margin-top: -68px;

    @include breakpoint (max-md){
        padding: 60px 0;
    }

    @include breakpoint (max-sm){
        padding: 40px 0;
    }
}

.brand-section-3 {
    position: relative;

    &::before {
        @include before;
        background-color: $bg-color-5;
    }
}