@use '../utils' as *;

/*=============================
	02. brand
===============================*/
.brand {
    &__area {
        padding: 0 0 120px;
        @media #{$xs} {
            padding: 0 0 100px;
        }
        &-two {
            background: var(--tg-color-gray-10);
            padding: 57px 0;
        }
    }
    &__item {
        min-height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        & img {
            filter: grayscale(1);
            cursor: pointer;
            opacity: .4;
            &:hover {
                opacity: 1;
                filter: grayscale(0);
            }
        }
    }
}
.partner {
    &__item {
        padding: 50px 40px;
        border-right: 1px solid var(--tg-border-7);
        border-top: 1px solid var(--tg-border-7);
        width: 100%;
        height: 200px;
        @include flexbox();
        align-items: center;
        justify-content: center;
        @media #{$lg} {
            height: 170px;
        }
        @media #{$md} {
           padding: 30px 30px;
            height: 150px;
        }
        @media #{$xs} {
            padding: 30px 20px;
            height: 120px;
        }
        & img {
            cursor: pointer;
        }
        &-wrap {
            border-bottom: 1px solid var(--tg-border-7);
            border-left: 1px solid var(--tg-border-7);
            margin-bottom: 0;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            @media #{$md} {
                grid-template-columns: repeat(3, 1fr);
            }
            @media #{$xs} {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }
}