.grid-padded {
    margin: 0 15px;
}
@media (min-width: 700px) {
    .grid {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    .grow {
        display: table-row;
    }
    .col {
        display: table-cell;
    }
    .grid-padded {
        margin-left: -1rem;
        margin-right: -1rem;
    }
    .grid-padded .grid {
        border-spacing: 1rem 0;
    }
}

@media (min-width: 700px) {
    .col-1 {
        width: 8.333333%;
    }
    .col-2 {
        width: 16.666667%;
    }
    .col-3 {
        width: 25%;
    }
    .col-4 {
        width: 33.333333%;
    }
    .col-5 {
        width: 41.666667%;
    }
    .col-6 {
        width: 50%;
    }
    .col-7 {
        width: 58.333333%;
    }
    .col-8 {
        width: 66.666667%;
    }
    .col-9 {
        width: 75%;
    }
    .col-10 {
        width: 83.333333%;
    }
    .col-11 {
        width: 91.666667%;
    }
}

.grid-align-middle .col {
    vertical-align: middle;
}

.grid-reverse {
    direction: rtl;
}

.grid-reverse .col {
    direction: ltr;
}