.vs-table-block {
    ul li {
        padding-left: 0!important;
        &::before {
            display: none!important;
        }
    }

    padding: 60px 0;

    .container {
        max-width: var(--page-max-width);
        width: fit-content;
        margin: 0 auto;
        padding: 0;
    }

    .vs-table-title {
        text-align: center;
        margin-bottom: 40px;
        padding: 0 1.5rem;
        font-weight: 700;
        color: var(--text);
    }

    .vs-table-title:has(+ .vs-table-description) {
        margin-bottom: 16px;
    }

    .vs-table-description {
        text-align: center;
        margin: 0 auto 40px;
        max-width: 600px;
        padding: 0 1.5rem;
        color: var(--text);
        opacity: 0.8;
        font-size: var(--font-base);
        line-height: 1.6;
    }

    .vs-table-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 0;
        width: 100%;
        background: var(--ncs-container-weak);
        border-radius: 16px;
        border: 1px solid var(--ncs-container-strong);
        overflow: hidden;
    }

    .vs-table-column {
        padding: 32px;
    }

    .vs-table-column-title {
        font-size: var(--font-xl);
        font-weight: 700;
        color: var(--text);
        margin: 0 0 24px 0;
    }

    .vs-table-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 1px;
        background: var(--ncs-container-strong);
    }

    .vs-table-vs {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: var(--background);
        border: 2px solid var(--ncs-container-strong);
        border-radius: 50%;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: var(--font-sm);
        color: var(--text);
        z-index: 1;
    }

    .vs-table-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .vs-table-item {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: var(--font-base);
        line-height: 1.5;
        color: var(--text);
    }

    .vs-table-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
    }

    .vs-table-item--plus .vs-table-icon {
        background-color: var(--maestra-green);
        color: white;
        border-radius: 50%;

        .dark-mode & {
            color: var(--ncs-subtitle-on-primary-dark, #00391d);
        }
    }

    .vs-table-item--minus .vs-table-icon {
        background-color: var(--maestra-red);
        color: white;
        border-radius: 50%;
    }

    .vs-table-text {
        flex: 1;
    }
}

@media (max-width: 900px) {
    .vs-table-block {
        .vs-table-column {
            padding: 24px;
        }

        .vs-table-column-title {
            margin-bottom: 20px;
        }

        .vs-table-vs {
            width: 40px;
            height: 40px;
        }
    }
}

@media (max-width: 600px) {
    .vs-table-block {
        padding: 40px 0;

        .vs-table-title {
            margin-bottom: 40px;
        }

        .vs-table-title:has(+ .vs-table-description) {
            margin-bottom: 12px;
        }

        .vs-table-description {
            margin-bottom: 32px;
        }

        .vs-table-grid {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
        }

        .vs-table-column {
            padding: 24px;
        }

        .vs-table-divider {
            width: 100%;
            height: 1px;
            background: var(--ncs-container-strong);
        }

        .vs-table-vs {
            top: 50%;
            left: 50%;
        }

        .vs-table-list {
            gap: 12px;
        }
    }
}