/* MOBILE */


/* Columns of 12 */
.full-width-grid, .full-width-block {
    width: 100%;
    grid-column: 1 / span 12;
}
.full-width-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.ten-of-twelve-block, .ten-of-twelve-grid {
    grid-column: 2 / span 10;
}
.ten-of-twelve-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}
.twenty-of-twelve-grid {
    grid-column: 2 / span 10;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
}
.six-of-twelve-block {
    grid-column: 4 / span 6;
}
.eight-of-twelve-block {
    grid-column: 3 / span 8;
}

/* Columns of 10 */
.full-ten-col-block, .full-ten-col-grid {
    grid-column: 1 / span 10;
}
.full-ten-col-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}

.eight-of-ten-block, .eight-of-ten-grid {
    grid-column: 2 / span 8;
}
.eight-of-ten-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}
.six-of-ten-block {
    grid-column: 3 / span 6;
}
.four-of-ten-block {
    grid-column: 4 / span 4;
}

/* Columns of 8 */
.full-eight-col-block, .full-eight-col-grid {
    grid-column: 1 / span 8;
}
.full-eight-col-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}
.six-of-eight-block, .six-of-eight-grid {
    grid-column: 2 / span 6;
}
.six-of-eight-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.four-of-eight-block {
    grid-column: 3 / span 4;
}



/* TABLET */

@media screen and (min-width: 768px) {
    /* Columns of 12 */
    .md\:ten-of-twelve-block, .md\:ten-of-twelve-grid {
        grid-column: 2 / span 10;
    }
    .md\:ten-of-twelve-grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
    }
    .md\:eight-of-twelve-block, .md\:eight-of-twelve-grid {
        grid-column: 3 / span 8;
    }
    .md\:eight-of-twelve-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }
    .md\:six-of-twelve-block {
        grid-column: 4 / span 6;
    }

    /* Columns of 10 */
    .md\:eight-of-ten-block, .md\:eight-of-ten-grid {
        grid-column: 2 / span 8;
    }
    .md\:eight-of-ten-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }
    .md\:six-of-ten-block, .md\:six-of-ten-grid {
        grid-column: 3 / span 6;
    }
    .md\:six-of-ten-grid {
        display: grid;
        grid-template-rows: repeat(6, 1fr);
    }
    .md\:four-of-ten-block {
        grid-column: 4 / span 4;
    }

    /* Columns of 8 */
    .md\:six-of-eight-block, .md\:six-of-eight-grid {
        grid-column: 2 / span 6;
    }
    .md\:six-of-eight-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }
    .md\:four-of-eight-block {
        grid-column: 3 / span 4;
    }

    /* Columns of 6 */
    .md\:four-of-six-block {
        grid-column: 2 / span 4;
    }
}



/* DESKTOP */

@media screen and (min-width: 1024px) {
    /* Columns of 12 */
    .lg\:full-width-grid, .lg\:full-width-block {
        width: 100dvw;
        grid-column: 1 / span 12;
    }
    .lg\:full-width-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }
    .lg\:ten-of-twelve-block, .lg\:ten-of-twelve-grid {
        grid-column: 2 / span 10;
    }
    .lg\:ten-of-twelve-grid {
        display: grid;
        grid-template-columns: repeat(20, 1fr);
    }
    .lg\:six-of-twelve-grid {
        grid-column: auto / span 6;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }

    /* Columns of 10 */
    .lg\:full-ten-col-block, .lg\:full-ten-col-grid {
        grid-column: 1 / span 10;
    }
    .lg\:full-ten-col-grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
    }
    .lg\:six-of-ten-block {
        grid-column: 3 / span 6;
    }

    /* Columns of 8 */
    .lg\:six-of-eight-block, .lg\:six-of-eight-grid {
        grid-column: 2 / span 6;
    }
    .lg\:six-of-eight-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }

    /* Columns of 6 */
    .lg\:four-of-six-block {
        grid-column: 2 / span 4;
    }
}