.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 1rem;
    grid-auto-rows: min-content;
}

.grid-col-8 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 1rem;
}

.grid-col-10 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 1rem;
    grid-auto-rows: min-content;
}

.grid-col-12 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 1rem;
    grid-auto-rows: min-content;
}

.grid-m-1 {
    grid-column: span 1;
}
.grid-m-2 {
    grid-column: span 2;
}
.grid-m-3 {
    grid-column: span 3;
}
.grid-m-4 {
    grid-column: span 4;
}
.grid-m-5 {
    grid-column: span 5;
}
.grid-m-6 {
    grid-column: span 6;
}


/* Desktop */
@media only screen and (min-width: 64rem) {
    .grid {
        grid-template-columns: repeat(16, 1fr);
    }

    .grid-col-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-col-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .grid-col-12 {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: min-content;
    }

    .grid-d-1 {
        grid-column: span 1;
    }

    .grid-d-2 {
        grid-column: span 2;
    }

    .grid-d-3 {
        grid-column: span 3;
    }

    .grid-d-4 {
        grid-column: span 4;
    }

    .grid-d-5 {
        grid-column: span 5;
    }

    .grid-d-6 {
        grid-column: span 6;
    }
    .grid-d-7 {
        grid-column: span 7;
    }
    .grid-d-8 {
        grid-column: span 8;
    }
    .grid-d-9 {
        grid-column: span 9;
    }
    .grid-d-10 {
        grid-column: span 10;
    }
    .grid-d-12 {
        grid-column: span 12;
    }
    .grid-d-13 {
        grid-column: span 13;
    }
    .grid-d-14 {
        grid-column: span 14;
    }
    .grid-d-15 {
        grid-column: span 15;
    }
    .grid-d-16 {
        grid-column: span 16;
    }
}