.callout[data-callout="table-cards"] {
    --table-background: rgba(var(--mono-rgb-0), 0.2);
    --table-row-alt-background: rgba(var(--mono-rgb-0), 0.2);
    --callout-blend-mode: normal;

    --card-width: 14em;

    padding: 0;
    background: none;
    border: none;

    .callout-title {
        display: none;
    }

    .callout-content {
        border: none;
        padding: 0;
    }

    table {
        width: 100%;
    }

    thead {
        display: none;
    }

    tbody {
        display: grid;
        gap: 0.6em;
        grid-template-columns: repeat(auto-fill, var(--card-width));
        justify-content: center;
    }

    tr {
        display: flex;
        flex-direction: column;
        margin-block: 0;
        border: var(--callout-border-width) solid rgba(var(--callout-color), var(--callout-border-opacity));
    }

    td {
        border: 0;
    }

    td:first-child {
        --link-decoration: none;
        border-bottom: var(--callout-border-width) solid rgba(var(--callout-color), var(--callout-border-opacity));
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    td:nth-child(n + 2) {
        background-color: rgba(var(--mono-rgb-0), 0.2);
    }

    td:last-child {
        flex-grow: 1;
    }
}

.callout[data-callout="table-cards"][data-callout-metadata~="accent"] {
    tr {
        border-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / var(--callout-border-opacity));
    }
    td:first-child {
        border-bottom-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / var(--callout-border-opacity));
    }
}
