@use '../utils' as *;

/*=============================
    	04. brands
===============================*/

.td-brands{
    &-title{
        &-wrap{
            & .td-section-title{
                color: var(--td-common-white);
            }
        }
    }
    &-btn{
        text-align: right;
        @media #{$md,$sm,$xs} {
            text-align: left;
        }
    }
    &-item{
        & a{
            border-radius: 15px;
            height: 157px;
            width: 100%;
            background: var(--td-common-white);
            text-align: center;
            line-height: 157px;
            display: inline-block;
            @media #{$xs} {
                width: 100%;
                height: 100px;
                line-height: 100px;
                & img{
                    width: 100px;
                }
            }
        }
    }
    &-2{
        &-wrap{
            & .td-brands-item{
                & a{
                    background: #f6f6f6;
                    & img{
                        filter: saturate(0);
                        transition: all .4s ease;
                    }
                    &:hover{
                        & img{
                            filter: saturate(1);
                        }
                    }
                }
            }
        }
    }
    &-4{
        &-wrap{
            & .td-brands-item a {
                background: var(--td-common-white);
            }
        }
    }
}