/* grid */
.grid {
    padding: 0 1.5em;
    overflow: hidden;
}
 
    
/* grid-row */
.grid .grid-row {
    overflow: hidden;
    margin: 0 -0.25em;
}


/* grid-col */
.grid .grid-row .grid-col {
    float: left;
    width: auto;
    overflow: hidden;
    min-height: 1px;
    padding: 0 0.25em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background:#fff;
}

.grid .grid-row .grid-col[data-cols="1"] {
    width: 4.16666667%;
}

.grid .grid-row .grid-col[data-cols="2"] {
    width: 8.33333334%;
}

.grid .grid-row .grid-col[data-cols="3"] {
    width: 12.5%;
}

.grid .grid-row .grid-col[data-cols="4"] {
    width: 16.6666667%;
}

.grid .grid-row .grid-col[data-cols="5"] {
    width: 20.8333334%;
}

.grid .grid-row .grid-col[data-cols="6"] {
    width: 25%;
}

.grid .grid-row .grid-col[data-cols="7"] {
    width: 29.1666667%;
}

.grid .grid-row .grid-col[data-cols="8"] {
    width: 33.3333334%;
}

.grid .grid-row .grid-col[data-cols="9"] {
    width: 37.5%;
}

.grid .grid-row .grid-col[data-cols="10"] {
    width: 41.6666667%;
}

.grid .grid-row .grid-col[data-cols="11"] {
    width: 45.8333334%;
}

.grid .grid-row .grid-col[data-cols="12"] {
    width: 50%;
}

.grid .grid-row .grid-col[data-cols="13"] {
    width: 54.1666667%;
}

.grid .grid-row .grid-col[data-cols="14"] {
    width: 58.3333334%;
}

.grid .grid-row .grid-col[data-cols="15"] {
    width: 62.5000001%;
}

.grid .grid-row .grid-col[data-cols="16"] {
    width: 66.6666667%;
}

.grid .grid-row .grid-col[data-cols="17"] {
    width: 70.8333334%;
}

.grid .grid-row .grid-col[data-cols="18"] {
    width: 75%;
}

.grid .grid-row .grid-col[data-cols="19"] {
    width: 79.1666667%;
}

.grid .grid-row .grid-col[data-cols="20"] {
    width: 83.3333334%;
}

.grid .grid-row .grid-col[data-cols="21"] {
    width: 87.5000001%;
}

.grid .grid-row .grid-col[data-cols="22"] {
    width: 91.6666667%;
}

.grid .grid-row .grid-col[data-cols="23"] {
    width: 95.8333334%;
}

.grid .grid-row .grid-col[data-cols="24"] {
    width: 100%;
}


/* attr:spacing */
.grid[data-spacing="small"] .grid-row {
    margin: 0 -0.5em;
}

.grid[data-spacing="small"] .grid-row .grid-col {
    padding: 0 0.5em;
}

.grid[data-spacing="medium"] .grid-row {
    margin: 0 -1em;
}

.grid[data-spacing="medium"] .grid-row .grid-col {
    padding: 0 1em;
}

.grid[data-spacing="large"] .grid-row {
    margin: 0 -1.5em;
}

.grid[data-spacing="large"] .grid-row .grid-col {
    padding: 0 1.5em;
}


/* attr:margin */
.grid[data-margin="small"],
.grid[data-spacing] [data-margin="small"],
.grid [data-margin="small"] {
    margin-top: 1em;
}

.grid[data-margin="medium"],
.grid[data-spacing] [data-margin="medium"],
.grid [data-margin="medium"] {
    margin-top: 2.5em;
}

.grid[data-margin="large"],
.grid[data-spacing] [data-margin="large"],
.grid [data-margin="large"] {
    margin-top: 4em;
}