l-cols.styl

$cols-count = 12
$cols-max-width = 960px
$ratio = 100 / 960
$cols-gutter = ($ratio * 28px)%
$cols-margin = ($ratio * 5px)%
$col-width = $ratio * (960 / 12)%
$cols-padding = 3%

.l-cols
  content ""
  display table
  clear both
  display flex
  flex-direction column
  width 100%

  &--m
    flex-direction row
    flex-wrap wrap

  &--vertical
    flex-direction row
    justify-content center
    align-items center

  @media $device-tablet-up
    flex-direction row

for n in (1..$cols-count)
  $width = unit((n/$cols-count) * 100, '%')

  .l-col-{n}
    float left
    padding-right $cols-padding
    padding-left $cols-padding

    &--m
      width $width

    @media $device-tablet-up
      position relative
      padding-right $cols-margin
      width $width !important

      &--push
        margin-left @width

      &:first-child
        padding-left $cols-gutter

      &:last-child
        padding-right $cols-gutter