.nt-cards {
    &.nt-grid {
        display: grid;
        grid-auto-columns: 1fr;
        gap: 0.5rem;

        // the following 3 rules are for mobile devices, to avoid
        // the grid forcing the width of the page
        max-width: 100vw;
        overflow-x: auto;
        padding: 1px;

        &.cols-1 {
            grid-template-columns: repeat(1, 1fr);
        }

        &.cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        &.cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        &.cols-4 {
            grid-template-columns: repeat(4, 1fr);
        }

        &.cols-5 {
            grid-template-columns: repeat(5, 1fr);
        }

        &.cols-6 {
            grid-template-columns: repeat(6, 1fr);
        }
    }
}

// for small devices

@media only screen and (max-width: 400px) {

    // force one card per line
    .nt-cards.nt-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.nt-card {
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);

    &:hover {
        box-shadow: 0 2px 2px 0 rgb(0 0 0 / 24%), 0 3px 1px -2px rgb(0 0 0 / 30%), 0 1px 5px 0 rgb(0 0 0 / 22%);
    }
}

[data-md-color-scheme="slate"] {
    .nt-card {
      border: 0.05rem solid var(--md-typeset-table-color);
    }
}


.nt-card>a {
    color: var(--md-default-fg-color);
}

.nt-card>a>div {
    cursor: pointer;
}

.nt-card {
    padding: 5px;
    margin-bottom: .5rem;
}

.nt-card-title {
    font-size: 1rem;
    font-weight: bold;
    margin: 4px 0 8px 0;
    line-height: 22px;
}

.nt-card-content {
    padding: .4rem .8rem .8rem .8rem;
}

.nt-card-text {
    font-size: 14px;
    padding: 0;
    margin: 0;
}

.nt-card .nt-card-image {
    text-align: center;
    border-radius: 2px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 120px;
}

.nt-card .nt-card-image.tags img {
    margin-top: 12px
}

.nt-card .nt-card-image img {
    height: 105px;
    margin-top: 5px;
}


.nt-card a:hover,
.nt-card a:focus {
    color: var(--md-accent-fg-color);
}


.nt-card h2 {
    margin: 0;
}