.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;
}