/* for displaying cards */

.nt-cards.nt-grid {
    display: grid;
    grid-auto-columns: 1fr;
    gap: 0.5rem;
    max-width: 100vw;
    overflow-x: auto;
    padding: 1px;
}

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

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

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

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

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

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

/* for small devices */
@media only screen and (max-width: 400px) {
    .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%);
}

.nt-card: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 {
    box-shadow: 0 2px 2px 0 rgb(4 40 33 / 14%), 0 3px 1px -2px rgb(40 86 94 / 47%), 0 1px 5px 0 rgb(139 252 255 / 64%);
}

[data-md-color-scheme="slate"] .nt-card:hover {
    box-shadow: 0 2px 2px 0 rgb(0 255 206 / 14%), 0 3px 1px -2px rgb(33 156 177 / 47%), 0 1px 5px 0 rgb(96 251 255 / 64%);
}

.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 .nt-card-icon {
    text-align: center;
    padding-top: 12px;
    min-height: 120px;
}

.nt-card .nt-card-icon .icon {
    font-size: 95px;
    line-height: 1;
}

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

.nt-card h2 {
    margin: 0;
}