.nx-card {
    display: inline-flex;
    flex-direction: column;
    border-radius: var(--nx-border-radius);
    background-color: var(--nx-tertiary-bg);
    box-shadow: var(--nx-box-shadow);
    border: var(--nx-border-width) solid var(--nx-border-color);
    margin: var(--nx-margin);
    padding: var(--nx-space);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    position: relative;
    font-family: var(--nx-font);
    color: var(--nx-primary-fg);
}

    .nx-card:hover {
       /* transform: translateY(-3px);*/
 /*       box-shadow: 0 6px 18px rgba(0,0,0,0.18);*/
    }



    .nx-card .nx-card_content {
    }


    .nx-card.nx-card--alert {
        background: var(--nx-alert-bg);
        border-color: var(--nx-alert-fg);
    }

    .nx-card.nx-card--positive {
        background: var(--nx-positive-bg);
        border-color: var(--nx-positive-fg);
    }

    .nx-card.nx-card--negative {
        background: var(--nx-negative-bg);
        border-color: var(--nx-negative-fg);
    }

    .nx-card.nx-card--highlight {
        background: var(--nx-highlight-bg);
        border-color: var(--nx-highlight-fg);
    }


    .nx-card.nx-card--muted {
        background: var(--nx-muted-bg);
        border-color: var(--nx-muted-fg);
    }

    .nx-card > .nx-card_heading {
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-size: 1.1rem;
        margin-bottom: var(--nx-space-small);
        color: var(--nx-primary-fg);
    }

    .nx-card > .nx-card_description {
        width: 100%;
        margin: var(--nx-space-small) 0;
        text-align: center;
        color: var(--nx-secondary-fg);
    }