@use '../utils' as *;

/*=============================
    	04. Brand
===============================*/
.brand {
    &__area {
        border-bottom: 1px solid var(--tg-border-2);
        padding: 52px 0;
        &-three {
            position: relative;
            z-index: 1;
            &::before {
                content: "";
                position: absolute;
                left: -194px;
                top: 260px;
                width: 320px;
                height: 320px;
                @include border-radius(50%);
                background: #DFD2FB;
                filter: blur(150px);
                z-index: -1;
            }
            &::after {
                content: "";
                position: absolute;
                right: -181px;
                top: 298px;
                width: 320px;
                height: 320px;
                @include border-radius(50%);
                background: #C3CEFA;
                filter: blur(150px);
                z-index: -1;
            }
        }
        &-four {
            padding: 75px 0;
        }
    }
    &-item {
        min-height: 46px;
        @include flexbox();
        align-items: center;
        justify-content: center;
        & img {
            cursor: pointer;
        }
        &-two {
            padding: 50px 40px;
            border-right: 1px solid var(--tg-border-12);
            border-top: 1px solid var(--tg-border-12);
            width: 100%;
            height: 186px;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--tg-color-white-default);
            @media #{$md} {
                padding: 30px 20px;
                height: 160px;
            }
            @media #{$xs} {
                height: 120px;
            }
            & img {
                cursor: pointer;
            }
        }
        &-three {
            padding: 20px 20px;
            border-right: 1px solid var(--tg-border-2);
            border-top: 1px solid var(--tg-border-2);
            width: 100%;
            height: 140px;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--tg-color-white-default);
            @media #{$lg} {
                height: 120px;
            }
            & img {
                cursor: pointer;
            }
        }
        &-wrap {
            border-bottom: 1px solid var(--tg-border-12);
            border-left: 1px solid var(--tg-border-12);
            margin-bottom: 0;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            @media #{$xs} {
                grid-template-columns: repeat(2, 1fr);
            }
            &-two {
                border-top: 1px solid var(--tg-border-2);
                padding: 84px 0;
            }
            &-three {
                border-bottom: 1px solid var(--tg-border-4);
                padding: 64px 0;
            }
            &-four {
                border-color: var(--tg-border-2);
                grid-template-columns: repeat(6, 1fr);
                @media #{$md} {
                    grid-template-columns: repeat(3, 1fr);
                }
                @media #{$xs} {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
            &-five {
                padding: 80px 0 60px;
                border-bottom: 1px solid #dbdbdb;
            }
        }
    }
    &__content {
        text-align: center;
        margin-bottom: 50px;
        & .title {
            margin-bottom: 0;
            font-size: 20px;
            font-weight: 400;
            color: var(--tg-border-1);
            & span {
                position: relative;
                color: var(--tg-heading-color);
                font-weight: 600;
                & svg {
                    position: absolute;
                    left: -5px;
                    bottom: -3px;
                    color: var(--tg-theme-primary);
                }
            }
        }
        &-two {
            text-align: center;
            margin-bottom: 50px;
            & .title {
                margin-bottom: 0;
                font-size: 18px;
                font-weight: 400;
                color: var(--tg-body-color);
                & span {
                    color: var(--tg-theme-primary);
                    font-weight: 600;
                }
            }
        }
        &-three {
            & .section__title {
                & .title {
                    line-height: 1.4;
                    & span {
                        font-size: 30px;
                        display: block;
                    }
                }
            }
        }
    }
}
