//
// kremalicious3
// --------------
// Grid
//


// Prevents padding to be added
*
    box-sizing: border-box

.container
    padding-left: 7%
    padding-right: 7%
    width: 100%

    @media $breakpoint2
        padding-left: 15%
        padding-right: 15%

.grid
    margin: auto
    padding: 0
    display: flex
    flex-wrap: wrap

    @media $breakpoint2
        max-width: 35em

    > .col1,
    > .col2,
    > .col3,
    > .col4,
    > .col5,
    > .col6
        flex: 1
        flex: 0 0 100%
        padding: 1em 0 0 1em

    > .col6
        padding-left: 0

    > .col1-xs,
    > .col2-xs,
    > .col3-xs,
    > .col4-xs,
    > .col5-xs,
    > .col6-xs
        flex: 1
        padding: 1em 0 0 1em

    > .col1-xs
        flex: 0 0 16.666666667%
    > .col2-xs
        flex: 0 0 33.333333333%
    > .col3-xs
        flex: 0 0 50%
    > .col4-xs
        flex: 0 0 66.666666666%
    > .col5-xs
        flex: 0 0 83.333333333%
    > .col6-xs
        flex: 0 0 100%
        padding-left: 0

    @media $breakpoint2
        > .col1
            flex: 0 0 16.5%
        > .col2
            flex: 0 0 33%
        > .col3
            flex: 0 0 50%
        > .col4
            flex: 0 0 66%
        > .col5
            flex: 0 0 82.5%
        > .col6
            flex: 0 0 100%