*{
    box-sizing: border-box;
}

/* grid container -ish */
.grid--nowrap, .grid--wrap {
    display: flex;
    list-style: none;
    padding: 0;
}
.grid--wrap {
    flex-wrap: wrap;
}
.grid--top {
    align-items: flex-start;
}
.grid--bottom {
    align-items: flex-end;
}
.grid--center {
    align-items: center;
}
.grid--stretch {
    align-items: stretch;
}
.grid--justifyCenter {
    justify-content: center;
}
.grid--space-between {
    justify-content: space-between;
}

/* grid item -ish */
.grid-cell {
    flex: 1;
}
.grid-cell--top {
    align-self: flex-start;
}
.grid-cell--bottom {
    align-self: flex-end;
}
.grid-cell--center {
    align-self: center;
}
.grid-cell--autoSize {
    flex: none;
}

.u-3of12,
.u-9of12 {
    flex: 0 0 100%;
}

@media (min-width: 30em) {
    
    .u-3of12 {
        flex: 0 0 25%;
    }
    .u-9of12 {
        flex: 0 0 75%;
    }
}

/* default grid item sizes */
.grid--fit > .grid-cell {
    flex: 1;
}
.grid--full > .grid-cell {
    flex: 0 0 100%;
}
.grid--1of2 > .grid-cell {
    flex: 0 0 50%;
}
.grid--1of3 > .grid-cell {
    flex: 0 0 33.3333%;
}
.grid--1of4 > .grid-cell {
    flex: 0 0 25%;
}
.grid--1of5 > .grid-cell{
    flex: 0 0 20%;
}
.grid--1of6 > .grid-cell {
    flex: 0 0 16.6667%;
}

@media (min-width: 30em)  {
    .small-grid--fit > .grid-cell {
        flex: 1;
    }
    .small-grid--full > .grid-cell {
        flex: 0 0 100%;
    }
    .small-grid--1of2 > .grid-cell {
        flex: 0 0 50%;
    }
    .small-grid--1of3 > .grid-cell {
        flex: 0 0 33.3333%;
    }
    .small-grid--1of4 > .grid-cell {
        flex: 0 0 25%;
    }
}

@media (min-width: 60em) {
    .large-grid--1of2 > .grid-cell {
        flex: 0 0 50%;
    }
}

/* grid gutter sizes */
.grid--gutters > .grid-cell {
    padding: 10px;
}

/* helper classes */

.padding-30 {
    padding:30px;
}
.padding-50 {
    padding:50px;
}
.padding-top--s {
    padding-top:30px;
}
.padding-top-btm--xl {
    padding:50px 0;
}
.padding-rght-lft--md {
    padding:0 30px;
}
.padding-top-btm--0 {
    padding-top:0;
    padding-bottom:0;
}
.padding-top--0 {
    padding-top:0;
}
.padding-btm--0 {
    padding-bottom:0;
}

.margin-top--0 {
    margin-top:0;
}
.margin-btm--0 {
    margin-bottom:0;
}