// Setup
// =================================================
.l-flex-grid {
    display: flex;
    flex-wrap: wrap;
}

.l-flex-grid--no-wrap {
    display: flex;
}

.l-flex-grid__xs {
    @media (min-width: 24em) {
        display: flex;
        flex-wrap: wrap;
    }
}

.l-flex-grid__sm {
    @media (min-width: 42em) {
        display: flex;
        flex-wrap: wrap;
    }
}

.l-flex-grid__md {
    @media (min-width: 60em) {
        display: flex;
        flex-wrap: wrap;
    }
}

.l-flex-grid__lg {
    @media (min-width: 74em) {
        display: flex;
        flex-wrap: wrap;
    }
}

// Directions helper
.l-flex-grid__row-reverse {
    flex-direction: row-reverse;
}

.l-flex-grid__column {
    flex-direction: column;
}

.l-flex-grid__column-reverse {
    flex-direction: column-reverse;
}

// Make last row not expand to fill
.l-flex-grid--clear-last-row {
    &:after {
        content: "";
        flex: auto;
    }
}

.l-flex-grid__cell {
    flex: 1;
}

// Helper for cell matching height
// =================================================

.l-flex-grid--flex-cells > .l-flex-grid__cell {
    display: flex;
}

// Gutter modifiers
// =================================================
.l-flex-grid--gutters {
    margin: -1em 0 0 -1em !important;
}

.l-flex-grid--gutters > .l-flex-grid__cell {
    padding: 1em 0 0 1em;
}

.l-flex-grid--gutters-lg {
    margin: -2em 0 0 -2em !important;
}

.l-flex-grid--gutters-lg > .l-flex-grid__cell {
    padding: 2em 0 0 2em;
}

// No padding needed for full-spanning grid.
@media (min-width: 18em) and (max-width: 28em) {
    .l-flex-grid__tn--full {
        margin: 0;
    }

    .l-flex-grid__tn--full > .l-flex-grid__cell {
        padding: 0;
    }
}

@media (min-width: 28em) and (max-width: 42em) {
    .l-flex-grid__xs--full {
        margin: 0;
    }

    .l-flex-grid__xs--full > .l-flex-grid__cell {
        padding: 0;
    }
}

@media (min-width: 42em) and (max-width: 60em) {
    .l-flex-grid__sm--full {
        margin: 0;
    }

    .l-flex-grid__sm--full > .l-flex-grid__cell {
        padding: 0;
    }
}

@media (min-width: 60em) and (max-width: 74em) {
    .l-flex-grid__md--full {
        margin: 0;
    }

    .l-flex-grid__md--full > .l-flex-grid__cell {
        padding: 0;
    }
}

@media (min-width: 74em) {
    .l-flex-grid__lg--full {
        margin: 0;
    }

    .l-flex-grid__lg--full > .l-flex-grid__cell {
        padding: 0;
    }
}

// clear grid when full column
.l-flex-grid--full {
    margin: 0;
}

// Alignment per column
// =================================================
.l-flex-grid--h-left {
    justify-content: flex-start;
}

.l-flex-grid--h-right {
    justify-content: flex-end;
}

.l-flex-grid--h-center {
    justify-content: center;
}

.l-flex-grid--h-space-around {
    justify-content: space-around;
}

.l-flex-grid--h-space-between {
    justify-content: space-between;
}

// Alignment per row
// =================================================
.l-flex-grid--v-top {
    align-items: flex-start;
}

.l-flex-grid--v-bottom {
    align-items: flex-end;
}

.l-flex-grid--v-center {
    align-items: center;
}

.l-flex-grid--v-baseline {
    align-items: baseline;
}

// Alignment per cell
// =================================================
.l-flex-grid__cell--top {
    align-self: flex-start;
}

.l-flex-grid__cell--bottom {
    align-self: flex-end;
}

.l-flex-grid__cell--center {
    align-self: center;
}

.l-flex-grid--full > .l-flex-grid__cell {
    flex: 0 0 100%;
}

// tiny screens
@media (min-width: 18em) {
    .l-flex-grid__tn > .l-flex-grid__cell {
        flex: 1;
    }

    .l-flex-grid__tn--full > .l-flex-grid__cell {
        flex: 0 0 100%;
    }

    .l-flex-grid__tn--1-2 > .l-flex-grid__cell {
        flex: 0 0 50%;
    }

    .l-flex-grid__tn--1-3 > .l-flex-grid__cell {
        flex: 0 0 33.3333%;
    }

    .l-flex-grid__tn--1-4 > .l-flex-grid__cell {
        flex: 0 0 25%;
    }
}

// extra-small screens
@media (min-width: 28em) {
    .l-flex-grid__xs > .l-flex-grid__cell {
        flex: 1;
    }

    .l-flex-grid__xs--full > .l-flex-grid__cell {
        flex: 0 0 100%;
    }

    .l-flex-grid__xs--1-2 > .l-flex-grid__cell {
        flex: 0 0 50%;
    }

    .l-flex-grid__xs--1-3 > .l-flex-grid__cell {
        flex: 0 0 33.3333%;
    }

    .l-flex-grid__xs--1-4 > .l-flex-grid__cell {
        flex: 0 0 25%;
    }
}

// small screens
@media (min-width: 42em) {
    .l-flex-grid__sm > .l-flex-grid__cell {
        flex: 1;
    }

    .l-flex-grid__sm--full > .l-flex-grid__cell {
        flex: 0 0 100%;
    }

    .l-flex-grid__sm--1-2 > .l-flex-grid__cell {
        flex: 0 0 50%;
    }

    .l-flex-grid__sm--1-3 > .l-flex-grid__cell {
        flex: 0 0 33.3333%;
    }

    .l-flex-grid__sm--1-4 > .l-flex-grid__cell {
        flex: 0 0 25%;
    }
}

// small screens
@media (min-width: 60em) {
    .l-flex-grid__md > .l-flex-grid__cell {
        flex: 1;
    }

    .l-flex-grid__md--full > .l-flex-grid__cell {
        flex: 0 0 100%;
    }

    .l-flex-grid__md--1-2 > .l-flex-grid__cell {
        flex: 0 0 50%;
    }

    .l-flex-grid__md--1-3 > .l-flex-grid__cell {
        flex: 0 0 33.3333%;
    }

    .l-flex-grid__md--1-4 > .l-flex-grid__cell {
        flex: 0 0 25%;
    }
}

// small screens
@media (min-width: 74em) {
    .l-flex-grid__lg > .l-flex-grid__cell {
        flex: 1;
    }

    .l-flex-grid__lg--full > .l-flex-grid__cell {
        flex: 0 0 100%;
    }

    .l-flex-grid__lg--1-2 > .l-flex-grid__cell {
        flex: 0 0 50%;
    }

    .l-flex-grid__lg--1-3 > .l-flex-grid__cell {
        flex: 0 0 33.3333%;
    }

    .l-flex-grid__lg--1-4 > .l-flex-grid__cell {
        flex: 0 0 25%;
    }
}

// Single cell size helpers
// =================================================
.u-full {
    width: 100% !important;
    flex: none !important;
}

.u-1of2 {
    width: 50% !important;
    flex: none !important;
}

.u-1of3 {
    width: 33.3333% !important;
    flex: none !important;
}

.u-2of3 {
    width: 66.6667% !important;
    flex: none !important;
}

.u-1of4 {
    width: 25% !important;
    flex: none !important;
}

.u-3of4 {
    width: 75% !important;
    flex: none !important;
}

.u-shrink {
    flex: inherit;
}

@media (min-width: 18em) {
    .u-tn-full {
        width: 100% !important;
        flex: none !important;
    }

    .u-tn-1of2 {
        width: 50% !important;
        flex: none !important;
    }

    .u-tn-1of3 {
        width: 33.3333% !important;
        flex: none !important;
    }

    .u-tn-2of3 {
        width: 66.6667% !important;
        flex: none !important;
    }

    .u-tn-1of4 {
        width: 25% !important;
        flex: none !important;
    }

    .u-tn-3of4 {
        width: 75% !important;
        flex: none !important;
    }
}

@media (min-width: 28em) {
    .u-xs-full {
        width: 100% !important;
        flex: none !important;
    }

    .u-xs-1of2 {
        width: 50% !important;
        flex: none !important;
    }

    .u-xs-1of3 {
        width: 33.3333% !important;
        flex: none !important;
    }

    .u-xs-2of3 {
        width: 66.6667% !important;
        flex: none !important;
    }

    .u-xs-1of4 {
        width: 25% !important;
        flex: none !important;
    }

    .u-xs-3of4 {
        width: 75% !important;
        flex: none !important;
    }
}

@media (min-width: 42em) {
    .u-sm-full {
        width: 100% !important;
        flex: none !important;
    }

    .u-sm-1of2 {
        width: 50% !important;
        flex: none !important;
    }

    .u-sm-1of3 {
        width: 33.3333% !important;
        flex: none !important;
    }


    .u-sm-2of3 {
        width: 66.6667% !important;
        flex: none !important;
    }

    .u-sm-1of4 {
        width: 25% !important;
        flex: none !important;
    }

    .u-sm-3of4 {
        width: 75% !important;
        flex: none !important;
    }
}

@media (min-width: 60em) {
    .u-md-full {
        width: 100% !important;
        flex: none !important;
    }

    .u-md-1of2 {
        width: 50% !important;
        flex: none !important;
    }

    .u-md-1of3 {
        width: 33.3333% !important;
        flex: none !important;
    }


    .u-md-2of3 {
        width: 66.6667% !important;
        flex: none !important;
    }

    .u-md-1of4 {
        width: 25% !important;
        flex: none !important;
    }

    .u-md-3of4 {
        width: 75% !important;
        flex: none !important;
    }
}

@media (min-width: 74em) {
    .u-lg-full {
        width: 100% !important;
        flex: none !important;
    }

    .u-lg-1of2 {
        width: 50% !important;
        flex: none !important;
    }

    .u-lg-1of3 {
        width: 33.3333% !important;
        flex: none !important;
    }


    .u-lg-2of3 {
        width: 66.6667% !important;
        flex: none !important;
    }

    .u-lg-1of4 {
        width: 25% !important;
        flex: none !important;
    }

    .u-lg-3of4 {
        width: 75% !important;
        flex: none !important;
    }
}

// Flex fallbacks
// ========================================

.no-flexbox.no-flexboxlegacy.no-flexboxtweener {
    .l-flex-grid {
        display: inline-block;
        vertical-align: top;
        width: 100%;

        .l-flex-grid__cell {
            margin-right: -3px;
        }
    }

    .l-flex-grid--full > .l-flex-grid__cell {
        width: 100%;
        padding: 0; // Gutters unneeded
    }

    .l-flex-grid--1-2 > .l-flex-grid__cell {
        width: 50%;
    }

    .l-flex-grid--1-3 > .l-flex-grid__cell {
        width: 33%;
    }

    .l-flex-grid--1-4 > .l-flex-grid__cell {
        width: 25%;
    }

    @media (min-width: 18em) {
        .l-flex-grid__tn--full > .l-flex-grid__cell {
            width: 100%;
        }

        .l-flex-grid__tn--1-2 > .l-flex-grid__cell {
            width: 50%;
        }

        .l-flex-grid__tn--1-3 > .l-flex-grid__cell {
            width: 33%;
        }

        .l-flex-grid__tn--1-4 > .l-flex-grid__cell {
            width: 25%;
        }
    }

    @media (min-width: 28em) {
        .l-flex-grid__xs--full > .l-flex-grid__cell {
            width: 100%;
        }

        .l-flex-grid__xs--1-2 > .l-flex-grid__cell {
            width: 50%;
        }

        .l-flex-grid__xs--1-3 > .l-flex-grid__cell {
            width: 33%;
        }

        .l-flex-grid__xs--1-4 > .l-flex-grid__cell {
            width: 25%;
        }
    }

    @media (min-width: 42em) {
        .l-flex-grid__sm--full > .l-flex-grid__cell {
            width: 100%;
        }

        .l-flex-grid__sm--1-2 > .l-flex-grid__cell {
            width: 50%;
        }

        .l-flex-grid__sm--1-3 > .l-flex-grid__cell {
            width: 33%;
        }

        .l-flex-grid__sm--1-4 > .l-flex-grid__cell {
            width: 25%;
        }
    }

    @media (min-width: 60em) {
        .l-flex-grid__md--full > .l-flex-grid__cell {
            width: 100%;
        }

        .l-flex-grid__md--1-2 > .l-flex-grid__cell {
            width: 50%;
        }

        .l-flex-grid__md--1-3 > .l-flex-grid__cell {
            width: 33%;
        }

        .l-flex-grid__md--1-4 > .l-flex-grid__cell {
            width: 25%;
        }
    }

    @media (min-width: 74em) {
        .l-flex-grid__lg--full > .l-flex-grid__cell {
            width: 100%;
        }

        .l-flex-grid__lg--1-2 > .l-flex-grid__cell {
            width: 50%;
        }

        .l-flex-grid__lg--1-3 > .l-flex-grid__cell {
            width: 33%;
        }

        .l-flex-grid__lg--1-4 > .l-flex-grid__cell {
            width: 25%;
        }
    }
}

// Single cell size helpers
// =================================================
.u-grow {
    flex-shrink: 0 !important;
    flex-grow: 1 !important;
}

.u-shrink {
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
}