@mixin fontSize($fontSize, $lineHeight: null, $bfs: $baseFontSize){
    font-size: ($fontSize/strip-unit($bfs)) + rem;
    @if $lineHeight{
        line-height: $lineHeight/$fontSize;
    }@else{
        line-height: $baseLineHeight;
    }
}

@function strip-unit($number){
    @if type-of($number) == 'number' and not unitless($number){
        @return $number / ($number * 0 + 1);
    }

    @return $number;
}

@mixin colBasic(){
    flex: 0 0 auto;
    padding: $gridColGutterY/2 $gridColGutterX/2;
}

@mixin makeGrid($breakpoint: ''){
    @if $breakpoint{
        $breakpoint: str-insert($breakpoint, '-', 0);
    } @else{
        $breakpoint: '';
    }

    .row--start#{$breakpoint}{ justify-content: flex-start; text-align: start; }
    .row--center#{$breakpoint}{ justify-content: center; }
    .row--end#{$breakpoint}{ justify-content: flex-end; text-align: end; }
    .row--top#{$breakpoint}{ align-items: flex-start; }
    .row--middle#{$breakpoint}{ align-items: center; }
    .row--bottom#{$breakpoint}{ align-items: flex-end; }
    .row--around#{$breakpoint}{ justify-content: space-around; }
    .row--between#{$breakpoint}{ justify-content: space-between; }
    .row--reverse#{$breakpoint}{ flex-direction: row-reverse; }
    .col--reverse#{$breakpoint}{ flex-direction: column-reverse; }
    .column#{$breakpoint}{ flex-direction: column; }
    .row--nowrap#{$breakpoint}{ flex-wrap: nowrap;}
    
    .col--first#{$breakpoint}{ order: -1; }
    .col--last#{$breakpoint}{ order: 1; }

    @if $breakpoint != ''{
        .col#{$breakpoint}{
            flex-grow: 1;
            flex-basis: 0;
            max-width: 100%;
            @include colBasic();
        }
    }
    
    .offset#{$breakpoint}-0{
        margin-left: 0%;
    }
    .d#{$breakpoint}-none{
        display: none !important;
    }
    .p#{$breakpoint}-none{
        padding: 0 !important;
    }
    .m#{$breakpoint}-none{
        margin: 0 !important;
    }
    .ml#{$breakpoint}-auto{
        margin-left: auto;
    }
    .d#{$breakpoint}-block{
        display: block !important;
    }
    .d#{$breakpoint}-flex{
        display: flex !important;
    }
    @for $i from 1 through $gridColsNb{
        .col#{$breakpoint}-#{$i}{
            @include colBasic();
            max-width: percentage($i / $gridColsNb);
            flex: 0 0 percentage($i / $gridColsNb);
        }
        .offset#{$breakpoint}-#{$i}{
            margin-left: percentage($i / $gridColsNb);
        }
        .offset-r#{$breakpoint}-#{$i}{
            margin-right: percentage($i / $gridColsNb);
        }
    }
}

@function vwCol($col, $modifier: 0, $container: $containerWidth){
    $oneColVw: (strip-unit($container) - (($gridColsNb - 1) * strip-unit($gridColGutterX))) / $gridColsNb;
    $c: (($oneColVw * $col) + (($col - 1) * strip-unit($gridColGutterX)) ) * 1vw + $modifier;
    @return #{$c}; 
}