.grid {
    display:grid;
    width:100%;
    grid-row-gap: 16px;
    grid-column-gap: 16px;
    padding:0 0 16px;
    grid-template-columns: repeat(1, 1fr);
}

.grid2,
.grid3,
.grid4,
.grid5
.grid6 {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 992px) {
    .grid3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .grid5 {
        grid-template-columns: repeat(5, 1fr);
    }

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

.grid .card {
    display: flex;
    flex-flow: column;
    margin-bottom: 0;
}

.grid .card-fullheight {
    min-height:100%;
}

.grid.grid-item-listview .grid-item {
    padding-top:30px;
}

.rowspan2 {grid-row: span 2;}
.rowspan3 {grid-row: span 3;}
.colspan2 {grid-column: span 2;}
.colspan3 {grid-column: span 3;}

.card .card-header {max-height: 200px;}
.card .card-header img {max-height: 200px;object-fit: cover;width:100%;height:100%;}

.ellipsis {
    white-space:nowrap;
    text-overflow: ellipsis;
    max-width:100%;
    overflow: hidden;
}