@use '../../utils' as *;

/*----------------------------------------*/
/*  7.4 brand
/*----------------------------------------*/
.#{$theme-prifix}-brand {
    &-spacing{
        padding: 100px 0px;
        border-top: 1px solid #03030324;
        border-bottom: 1px solid #03030324;
        @media #{$xs}{
            padding: 70px 0px;
        }
    }
    &-item{
        & a{
            opacity: 0.5;
            &:hover{
                opacity: 1;
            }
        }
    }
    &-slide{
        &-active{
            & .swiper-slide{
                display: inline-block;
                width: auto;
                margin: 0 80px;
                @media #{$md,$sm}{
                    margin: 0 50px;
                }
                @media #{$xs}{
                    margin: 0 30px;
                }
            }
        }
    }
    &-customer{
        border: 1px solid #03030324;
        border-radius: 100px;
        padding: 6px 35px;
        display: inline-block;
        background: var(--tp-common-white);
        &-wrap{
            position: absolute;
            top: -20px;
            left: 0;
            right: 0;
            text-align: center;
        }
    }
    &-bottom{
        &-border{
            width: 97%;
            height: 20px;
            background: transparent;
            bottom: -20px;
            left: 0;
            right: 0;
            margin: 0 auto;
            display: inline-block;
            position: absolute;
            border: 1px solid #03030324;
            z-index: -1;
            border-top: 0;
        }
    }
    &-2{
        &-item{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 250px;
            width: 260px;
            border: 1px solid var(--tp-border-1);
            margin-right: -1px;
            margin-top: -1px;
            opacity: 0.5;
            @media #{$sm}{
                width: 255px;
            }
            @media #{$xs}{
                height: 110px;
                width: 150px;
                & img{
                    width: 100px;
                }
            }
            &:hover{
                opacity: 1;
            }
            &-wrap{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }
        }
    }
    &-cst{
        &-spacing{
            padding: 160px 0px;
            @media #{$xl,$lg,$md,$sm,$xs}{
                padding: 100px 0px;
            }
        }
    }
    &-inner{
        &-item{
            & img{
                width: 100%;
            }
        }
    }
}