// CONTAINER (to center content)
.container{
    max-width: $container-width;
    margin: 0 auto;
    padding: 0 $gutter;

    @include desktop--large{
        padding: 0 2*$gutter;
    }
}
@include desktop{

    // container medium size
    .container--medium {
        max-width: $container-width--medium;
    }

    // container large size
    .container--large {
        max-width: $container-width--large;
    }
}



// GRID
@include desktop {

    .grid {
    	display: flex;
        margin-left: -$gutter; // col padding left value
    }

    // grid columns 2, 3 ... 12 (overrides col sizes)
    @for $i from 2 through 12 {
        .grid--#{$i} {
            flex-wrap: wrap; // add wrapping
        }
        .grid--#{$i} .col{
            flex: 0 1 auto; // reset flex
            width: percentage(1/$i);
        }
    }

    // extra padding
    .grid--extra-padding{
        margin-left: -4*$gutter;
    }
    .grid--extra-padding>.col{
        padding-left: 4*$gutter;
    }
}



// COLUMN
@include desktop {

    .col {
        flex: 1;
        padding-left: $gutter;
    }

    // col sizes 1-2, 1-3 ... 1-12
    @for $i from 2 through 12 {
        .col--1-#{$i} {
            flex: 0 1 auto; // reset flex
            width: percentage(1/$i);
        }
    }

    // col size 2-3
    .col--2-3 {
        flex: 0 1 auto; // reset flex
        width: percentage(2/3);
    }

    // col size 3-4
    .col--3-4 {
        flex: 0 1 auto; // reset flex
        width: percentage(3/4);
    }
}