/* 12 column fluid grid */

/* 
To use, simply drop the following classes into your markup. You can add 
borders and padding without worrying about breaking the layout. 
The first column in a row must always have the additional "first" class, which 
takes care of clearing the previous row and removing the left margin.
*/

.container {
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
}

@media screen and (min-width: 800px) {
    .container {
        grid-template-columns: repeat(12, 1fr);
    }

    .grid1 {
        grid-column-end: span 1;
    }
    .grid2 {
        grid-column-end: span 2;
    }
    .grid3 {
        grid-column-end: span 3;
    }
    .grid4 {
        grid-column-end: span 4;
    }
    .grid5 {
        grid-column-end: span 5;
    }
    .grid6 {
        grid-column-end: span 6;
    }
    .grid7 {
        grid-column-end: span 7;
    }
    .grid8 {
        grid-column-end: span 8;
    }
    .grid9 {
        grid-column-end: span 9;
    }
    .grid10 {
        grid-column-end: span 10;
    }
    .grid11 {
        grid-column-end: span 11;
    }
    .grid12 {
        grid-column-end: span 12;
    }
}

.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {
    
}