=container
  max-width: $container-width
  margin: 0 auto
  padding: 0 $container-padding

=row
  display: flex
  flex-wrap: wrap
  margin: 0 -#{$h-gutter / 2}

=col($cols: "false", $breakpoint: "false")
  @if $breakpoint != "false" and map_has_key($grid-breakpoints, $breakpoint) and $cols != "false" and type_of($cols) == number
    @media screen and (#{$media-query}-width: map-get($grid-breakpoints, $breakpoint))
      width: calc(100% / #{$columns} * #{$cols} - #{$h-gutter})
      flex: 0 0 auto
      box-sizing: border-box
      margin: 0 ($h-gutter / 2) $v-gutter
  @else if $breakpoint == "false" and $cols != "false" and type_of($cols) == number
    width: calc(100% / #{$columns} * #{$cols} - #{$h-gutter})
    flex: 0 0 auto
    box-sizing: border-box
    margin: 0 ($h-gutter / 2) $v-gutter
  @else
    flex: 1 0 0%
    box-sizing: border-box
    margin: 0 ($h-gutter / 2) $v-gutter

@function col-width($cols: 1)
  @return calc(100% / #{$columns} * #{$cols} - #{$h-gutter})

=generate-grid($cols: $columns)
  @for $i from 1 through $cols
    .col-#{$i}
      width: col-width($i)

=generate-breakpoint($cols, $screen-width, $name)
  .col-#{$name}-#{$cols}
    @media screen and (#{$media-query}-width: $screen-width)
      width: calc(100% / #{$columns} * #{$cols} - #{$h-gutter}) !important
      flex: auto 0 0

=generate-grid-breakpoints($cols: $columns, $breakpoints: $grid-breakpoints)
  @for $i from 1 through $cols
    @each $name, $value in $breakpoints
      +generate-breakpoint($i, $value, $name)