.d-grid { display: grid !important; }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* first row sized to its content, second row absorbs the remaining height;
   needed so a row-spanning item does not stretch the first row */
.grid-rows-auto-1fr { grid-template-rows: auto 1fr; }

.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.row-span-2 { grid-row: span 2 / span 2; }

@media (min-width: 768px) {
    .d-md-grid { display: grid !important; }

    .grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .grid-rows-md-auto-1fr { grid-template-rows: auto 1fr; }

    .col-span-md-2 { grid-column: span 2 / span 2; }
    .col-span-md-3 { grid-column: span 3 / span 3; }
    .row-span-md-2 { grid-row: span 2 / span 2; }
}