/* Simple flexbox based grid system */

$columns: 12;

@mixin layout-cols($device) {
  @for $i from 1 through 12 {
    .l-#{$device}-col-#{$i} {
      flex: 0 0 $i / $columns * 100%;
    }
  }
}

@mixin responsify {

  /* Common rules */
  .l-container {
    margin-left: auto;
    margin-right: auto;

    .row {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;

      @include layout-cols(d);
    }
  }

  /* Tablet rules */
  @media only screen
  and (max-width: 768px) {
    .l-container {
      .row {
        @include layout-cols(t);
      }
    }
  }

  /* Mobile rules */
  @media only screen
  and (max-width: 480px) {
    .l-container{
      .row {
        @include layout-cols(m);
      }
    }
  }

}

@include responsify;