.compare-block {
    padding: 80px 0px;
    h2.main-title {
        max-width: 720px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        letter-spacing: -0.005rem;
    }
    .block-desc {
        max-width: 592px;
        margin-bottom: 44px;
        font-weight: 500;
        font-size: 18px;
        line-height: 133%;
        text-align: center;
        color: var(--grey-600);
        margin-left: auto;
        margin-right: auto;
        letter-spacing: -0.005rem;
    }
    .table-wrapper {
        border: 1px solid var(--grey-150);
        border-radius: 8px;
        max-width: 1005px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        &:before {
            content: "";
            width: 32%;
            height: 100%;
            top: 0;
            left: calc(36% + 1px);
            position: absolute;
            background: linear-gradient(180deg, rgba(248, 248, 248, 0.05) 3.5%, rgba(0, 0, 0, 0.02) 100%);
            pointer-events: none;
        }
    }
    .table-head {
        display: flex;
        .head-element {
            width: 32%;
            display: flex;
            flex-direction: column;
            gap: 24px;
            padding: 24px;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            border-left:  1px solid rgba(0, 0, 0, 0.1);
            &:nth-child(1) {
                width: 36%;
                border-left: unset;
                border-bottom: unset;
            }
        }
        .head-logo {
            width: auto;
            max-width: 100px;
            display: flex;
            height: auto;
            max-height: 80px;
            & svg,
            & img {
                width: auto;
                height: auto;
                display: block;
                object-fit: contain;
                max-width: 100%;
                max-height: 100%;
            }
        }
        .head-desc {
            font-weight: 600;
            font-size: 20px;
            line-height: 140%;
            text-align: center;
        }
        .btn {
            width: 100%;
            margin-top: auto;
            white-space: wrap;
        }
    }
    .table-rows {
        display: flex;
        flex-direction: column;
    }
    .table-row {
        display: flex;
        border-bottom: 1.54px solid rgba(0, 0, 0, 0.1);
        &:last-child {
            border-bottom: unset;
        }
    }
    .row-item {
        font-weight: 500;
        font-size: 14px;
        line-height: 143%;
        color: var(--grey-600);
        padding: 20px;
        border-left:  1px solid rgba(0, 0, 0, 0.1);
        width: 32%;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        letter-spacing: -0.005rem;
        &:first-child {
            border-left: unset;
            justify-content: left;
            width: 36%;
            text-align: left;
        }
        &.icon {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--second-family);
            font-weight: 600;
            font-size: 32px;
            line-height: 100%;
            background: linear-gradient(149.42deg, #30cbe9 8.3%, #3126a0 95.45%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        &.not-has {
            font-family: var(--second-family);
            font-weight: 600;
            font-size: 32px;
            line-height: 100%;
            color: var(--grey-150);
            background: transparent;
            background-clip: unset;
            -webkit-background-clip: unset;
            -webkit-text-fill-color: unset;
        }
    }
    @media (max-width: 996px) { 
        padding: 40px 0px;
        h2.main-title {
            letter-spacing: unset;
        }
        .block-desc {
            font-size: 16px;
        }
    }
    @media (max-width: 768px) { 
        .table-head {
            .head-element {
                gap: 20px;
                padding: 24px 12px;
            }
            .head-desc {
                font-size: 12px;
            }
            .btn {
                padding: 4px 12px;
                font-size: 12px;
            }
            .head-logo {
                max-width: 60px;
                max-height: 60px;
            }
        }
        .row-item {
            padding: 8px 12px;
            font-size: 12px;
            &.icon {
                font-size: 24px;
            }
            &.not-has {
                font-size: 24px;
            }
        }
    }
    @media (max-width: 498px) { 
        .table-wrapper {
            &:before {
                left: 33%;
                width: 33%;
            }
        }
        .table-head {
            .head-element {
                width: 33%;
                &:nth-child(1) {
                    width: 33%;
                }
            }
        }
        .row-item {
            width: 33%;
            word-break: break-word;
            &:nth-child(1) {
                width: 33%;
            }
        }
    }
}