.module-component-princip .box{
    background:var(--gradient-bg-overlay-2);
    padding: var(--spacing-80) 0;
    border-radius: var(--radius-20);
}
.module-component-princip .tag {
    color: var(--blue-100);
    padding: var(--spacing-8) var(--spacing-30);
    border-radius: var(--radius-20);
    background: var(--blue-100-10);
    width: fit-content;
}

.module-component-princip .grid{
    max-width: calc(1260 * var(--rpx));
    margin: auto;
}

.module-component-princip .grid .text{
    transition: var(--transition-medium);
}

.module-component-princip .grid .text:hover{
    transform: translateY(calc(-10 * var(--rpx)));
}

.module-component-princip .grid .text p{
    font:var(--font-p1);
    color: var(--text-70);
}

.module-component-princip .grid .text h3{
    color: var(--blue-100);
}

.module-component-princip .grid > div:nth-child(1) .text{
    text-align: right;
    padding-top: calc(60 * var(--rpx));
}

.module-component-princip .grid > div:nth-child(2) .text{
    text-align: center;
    width: 110%;
    left: -5%;
    position: relative;
}

.module-component-princip .grid > div:nth-child(3) .text{
    text-align: left;
    padding-top: calc(60 * var(--rpx));
}

.module-component-princip .grid .circle{
    position: relative;
}

.module-component-princip .grid .circle svg{
    width: calc(385 * var(--rpx));
    height: calc(385 * var(--rpx));
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
}

.module-component-princip .grid .circle img{
    width: calc(385 * var(--rpx));
    height: calc(385 * var(--rpx));
    pointer-events: none;
    scale: 0.75;
}




@media (max-width: 1023px) {

    .module-component-princip [pc] {
        display: none;
    }

    /* Box */
    .module-component-princip .box {
        padding: var(--spacing-60) 13px;
    }

    .module-component-princip .top{
        align-items: flex-start;
        gap:24px;
    }

    .module-component-princip .grid {
        max-width: 100%;
        gap: 34px;
    }

    .module-component-princip .grid .text{
        padding-top: 0 !important;
        text-align: left !important;
    }

    .module-component-princip .grid > div:nth-child(2) {
        grid-row: 1;
    }
    

    /* Circle */
    .module-component-princip .grid .circle{
        margin-bottom: 24px;
    }

    .module-component-princip .grid .circle > div:first-child{
        position: absolute;
        inset: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .module-component-princip .grid .circle svg {
        position: unset;
        margin: 0;
    }

    .module-component-princip .grid .circle img {
        width: 100%;
        height: 271px;
        scale: 1;
    }
}


@media (min-width: 1024px) {
    .module-component-princip [mobile] {
        display: none;
    }
}