// Grid
// ––––––––––––––––––––––––––––––––––––––––––––––––––

.center-center
    justify-content: center
    align-items: center

.left-top, .top-left
    justify-content: flex-start
    align-items: flex-start

.right-bottom, .bottom-right
    justify-content: flex-end
    align-items: flex-end

.tab-row

    @media screen and (max-width: $tab-screen)
        flex-direction: row !important

.tab-row-reverse

    @media screen and (max-width: $tab-screen)
        flex-direction: row-reverse !important

.mob-row

    @media screen and (max-width: $mob-lg-screen)
        flex-direction: row !important

.mob-row-reverse

    @media screen and (max-width: $mob-lg-screen)
        flex-direction: row-reverse !important

.tab-col

    @media screen and (max-width: $tab-screen)
        flex-direction: column !important

.tab-col-reverse

    @media screen and (max-width: $tab-screen)
        flex-direction: column-reverse !important

.tab-col, .tab-col-reverse

    @media screen and (max-width: $tab-screen)

        .col
            margin-bottom: 4%
            margin-left: 0px

            &:last-of-type
                margin-bottom: 0px

.mob-col

    @media screen and (max-width: $mob-lg-screen)
        flex-direction: column !important

.mob-col-reverse

    @media screen and (max-width: $mob-lg-screen)
        flex-direction: column-reverse !important

.row
    display: flex
    width: 100%

    &.wrap
        flex-wrap: wrap

    &.reverse
        flex-direction: row-reverse

    &.left-center
        justify-content: flex-start
        align-items: center

    &.left-bottom, &.bottom-left
        justify-content: flex-start
        align-items: flex-end

    &.center-top
        justify-content: center
        align-items: flex-start

    &.center-bottom
        justify-content: center
        align-items: flex-end

    &.right-top, &.top-right
        justify-content: flex-end
        align-items: flex-start

    &.right-center
        justify-content: flex-end
        align-items: center

    .col
        margin-left: 4%

    &.fluid

        .col
            margin-left: 0px

.col
    display: flex
    flex-direction: column
    width: 100%

    &.reverse
        flex-direction: column-reverse

    &:first-child
        margin-left: 0px

    &.one
        width: 4.66666666667%

    &.two, &.sixth
        width: 13.3333333333%

    &.three, &.quarter
        width: 22%

    &.four, &.third
        width: 30.6666666667%

    &.five
        width: 39.3333333333%

    &.six, &.half
        width: 48%

    &.seven
        width: 56.6666666667%

    &.eight, &.two-thirds
        width: 65.3333333333%

    &.nine, &.three-quarters
        width: 74.0%

    &.ten, &.five-sixths
        width: 82.6666666667%

    &.eleven
        width: 91.3333333333%

    &.twelve, &.full
        width: 100%
        margin-left: 0

    @media screen and (max-width: $tab-screen)

        &.tab-

            &one
                width: 4.66666666667% !important

            &two, &sixth
                width: 13.3333333333% !important

            &three, &quarter
                width: 22% !important

            &four, &third
                width: 30.6666666667% !important

            &five
                width: 39.3333333333% !important

            &six, &half
                width: 48% !important

            &seven
                width: 56.6666666667% !important

            &eight, &two-thirds
                width: 65.3333333333% !important

            &nine, &three-quarters
                width: 74.0% !important

            &ten, &five-sixths
                width: 82.6666666667% !important

            &eleven
                width: 91.3333333333% !important

            &twelve, &full
                width: 100% !important
                margin-left: 0
                margin-bottom: 3%

                &:last-of-type
                    margin-bottom: 0%

    @media screen and (max-width: $mob-lg-screen)

        &.mob-

            &one
                width: 4.66666666667% !important

            &two, &sixth
                width: 13.3333333333% !important

            &three, &quarter
                width: 22% !important

            &four, &third
                width: 30.6666666667% !important

            &five
                width: 39.3333333333% !important

            &six, &half
                width: 48% !important

            &seven
                width: 56.6666666667% !important

            &eight, &two-thirds
                width: 65.3333333333% !important

            &nine, &three-quarters
                width: 74.0% !important

            &ten, &five-sixths
                width: 82.6666666667% !important

            &eleven
                width: 91.3333333333% !important

            &twelve, &full
                width: 100% !important
                margin-left: 0
                margin-bottom: 3%

                &:last-of-type
                    margin-bottom: 0%

    &.left-center
        justify-content: center
        align-items: flex-start

    &.left-bottom, &.bottom-left
        justify-content: flex-end
        align-items: flex-start

    &.center-top
        justify-content: flex-start
        align-items: center

    &.center-bottom
        justify-content: flex-end
        align-items: center

    &.right-top, &.top-right
        justify-content: flex-start
        align-items: flex-end

    &.right-center
        justify-content: center
        align-items: flex-end