@-ms-viewport {
  width: device-width;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

// == Container
.c-grid {
  $self: #{&};
  $container: #{$self}-container;
  $row: #{$self}-row;
  $column: #{$self}-col;

  $breakpoints: sm md lg xl xs;
  $grid-gutter: 15px !default;
  $grid-columns-count: 12;

  @mixin make-columns() {
    @for $index from 1 through $grid-columns-count {
      $width: (100% / $grid-columns-count) * $index;

      &#{$index} {
        flex: 0 0 $width;
        max-width: $width;
      }
    }
  }

  @at-root {
    #{$container} {
      margin-right: auto;
      margin-left: auto;
      padding-right: $grid-gutter;
      padding-left: $grid-gutter;

      @include make-modifier('fluid') {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-right: $grid-gutter;
        padding-left: $grid-gutter;
      }
    }

    // Row
    #{$row} {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-right: -$grid-gutter;
      margin-left: -$grid-gutter;

      @include make-modifier('no-gutters') {
        margin-right: 0;
        margin-left: 0;

        & > #{$column} {
          padding-right: 0;
          padding-left: 0;
        }
      }

      @include make-modifier('no-wrap') {
        flex-wrap: nowrap;
      }

      @include make-modifier('items') {
        &-start {
          align-items: start;
        }
        &-end {
          align-items: flex-end;
        }
        &-center {
          align-items: center;
        }
        &-stretch {
          align-items: stretch;
        }
        &-baseline{
          align-items: baseline;
        }
      }

      @include make-modifier('justify') {
        &-start {
          justify-content: flex-start;
        }
        &-end {
          justify-content: flex-end;
        }
        &-center {
          justify-content: center;
        }
        &-between {
          justify-content: space-between;
        }
        &-around {
          justify-content: space-around;
        }
      }
    }

    // Columns
    %columnStyle {
      position: relative;
      flex: 0 0 auto;
      width: auto;
      max-width: 100%;
      min-height: 1px;
      padding-right: $grid-gutter;
      padding-left: $grid-gutter;
    }

    #{$column} {
      @extend %columnStyle;

      @each $breakpoint in $breakpoints {
        &-#{$breakpoint} {
          @include make-columns();
        }
      }
      // @each.end
    }

    // Media
    @include media(sm) {
      #{$container} {
        width: 570px;
        max-width: 100%;
      }

      #{$column}-sm {
        @include make-columns();
      }
    }

    @include media(md) {
      #{$container} {
        width: 750px;
        max-width: 100%;
      }

      #{$column}-md {
        @include make-columns();
      }
    }

    @include media(lg) {
      #{$container} {
        width: 990px;
        max-width: 100%;
      }

      #{$column}-lg {
        @include make-columns();
      }
    }

    @include media(xl) {
      #{$container} {
        width: 1170px;
        max-width: 100%;
      }

      #{$column}-xl {
        @include make-columns();
      }
    }

  }

}