.grid {
    margin: 0 3em;
}

.grid .grid-row {
    overflow: hidden;
    margin: 0 -1em;
}

.grid .grid-row:after {
    content: "";
    height: 0px;
    display: block;
    clear: both;
}

.grid .grid-col {
    padding: 0 1em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (min-width: 1024px) {

    .grid .grid-col {
        float: left;    
    }

    .grid .grid-col[data-cols="1"]{
        width: 4.16666667%;
    }
    
    .grid .grid-col[data-cols="2"]{
        width: 8.13333334%;
    }
    
    .grid .grid-col[data-cols="3"]{
        width: 12.5%;
    }
    
    .grid .grid-col[data-cols="4"]{
        width: 16.66666668%;
    }
    
    .grid .grid-col[data-cols="5"]{
        width: 20.83333335%;
    }
    
    .grid .grid-col[data-cols="6"]{
        width: 25.00000002%;
    }
    
    .grid .grid-col[data-cols="7"]{
        width: 29.16666669%;
    }
    
    .grid .grid-col[data-cols="8"]{
        width: 33.33333336%;
    }
    
    .grid .grid-col[data-cols="9"]{
        width: 37.50000003%;
    }
    
    .grid .grid-col[data-cols="10"]{
        width: 41.6666667%;
    }
    
    .grid .grid-col[data-cols="11"]{
        width: 45.83333337%;
    }
    
    .grid .grid-col[data-cols="12"]{
        width: 50.00000004%;
    }
    
    .grid .grid-col[data-cols="13"]{
        width: 54.16666671%;
    }
    
    .grid .grid-col[data-cols="14"]{
        width: 58.33333338%;
    }
    
    .grid .grid-col[data-cols="15"]{
        width: 62.50000005%;
    }
    
    .grid .grid-col[data-cols="16"]{
        width: 66.66666672%;
    }
    
    .grid .grid-col[data-cols="17"]{
        width: 70.83333339%;
    }
    
    .grid .grid-col[data-cols="18"]{
        width: 75.00000006%;
    }
    
    .grid .grid-col[data-cols="19"]{
        width: 79.16666673%;
    }
    
    .grid .grid-col[data-cols="20"]{
        width: 83.3333334%;
    }
    
    .grid .grid-col[data-cols="21"]{
        width: 87.50000007%;
    }
    
    .grid .grid-col[data-cols="22"]{
        width: 91.66666674%;
    }
    
    .grid .grid-col[data-cols="23"]{
        width: 95.83333341%;
    }
    
    .grid .grid-col[data-cols="24"]{
        width: 100.0000000%;
    }

}