///////////////////////
// GRID
////
// General grid styling
// 

.section
    margin-bottom: $section-space-between
    position: relative
    &--no-margin, &--last-no-margin:last-child
        margin-bottom: 0


// Basic grid
main 
    overflow-x: hidden
    width: 100vw
    max-width: 100%
.container
    position: relative
    width: 100%
    padding-right: $grid-gutter
    padding-left: $grid-gutter
    margin-right: auto
    margin-left: auto
    max-width: $max-grid-width + (2 * $grid-gutter)

.row 
    display: flex
    flex-wrap: wrap
    .col
        flex-basis: 0
        flex-grow: 1
        max-width: 100%
        position: relative
        @mixin col-width($width)
            width: $width
            max-width: $width
            flex-basis: $width
        &--50
            @include col-width(50%)

    &:after
        content: ''
        display: table
        clear: both

@mixin row-col-gutters($gap, $row_class: 'row')
    $col-gutter: $gap / 2
    .#{$row_class}
        margin-right: -1 * $col-gutter
        margin-left: -1 * $col-gutter
        .col
            padding-right: $col-gutter
            padding-left: $col-gutter
// @include row-col-gutters(100px, 'row--col-gap-100')


// Helpful row classes
.container .row 
    &.vertical-center 
        align-items: center
    &.inverse
        flex-direction: row-reverse


/***********/
/** MEDIA **/
/***********/
@mixin base-grid--laptop-and-bigger  
    .section 
        &--inverse
            .row 
                flex-direction: row-reverse
    .container 
        &--fullwidth 
            max-width: none
            padding: 0
            .row 
                padding-right: 0
                padding-left: 0
        .row
            .col--50.col.col--contained-middle
                max-width: $max-grid-width / 2
                margin-right: auto
                margin-left: auto
            &:not(.inverse)
                .col--50.col
                    &--contained-left, .contained-left
                        max-width: $max-grid-width / 2
                        margin-left: auto
                    &--contained-right, .contained-right
                        max-width: $max-grid-width / 2
                        margin-right: auto
            &.inverse 
                .col--50.col
                    &--contained-left, .contained-left
                        max-width: $max-grid-width / 2
                        margin-right: auto
                    &--contained-right, .contained-right
                        max-width: $max-grid-width / 2
                        margin-left: auto


@mixin base-grid--tablet-and-smaller
    .container 
        .row 
            margin-right: 0
            margin-left: 0
            .col
                max-width: 100%
                flex-basis: 100%
                width: 100%
                margin-bottom: 20px
                padding-right: 0
                padding-left: 0
                .margin-right, .margin-left, .margin-right-small, .margin-left-small
                    margin-right: 0
                    margin-left: 0
    .section
        &, &--margin-bot-small, &--margin-bot-smaller, &--x-large-margin
            margin-bottom: $section-space-between-mobile
        &:last-child:not(&--last-add-margin-bot), &--margin-bot-none
            margin-bottom: 0

        &--tablet-inverse-order .col
            &:first-child  
                order: 2
            &:last-child
                order: 1