$columns: 12;
$container-base-width: 1200px;
$container-offset: $base-spacing-unit;

$mobile:  576px;
$tablet:  768px;
$desktop: 992px;

$mq: ( $mobile:$columns, $tablet:$columns, $desktop:$columns );

.container {
  max-width: $container-base-width;
  padding-left: $container-offset;
  padding-right: $container-offset;
  margin: 0 auto;
}

.container-full {
  max-width: 100%;
  padding-left: $container-offset;
  padding-right: $container-offset;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 auto;
  flex-direction: row;
  box-sizing: border-box;
  margin-left: ($base-spacing-unit * -1);
  margin-right: ($base-spacing-unit * -1);
}

.col {
  padding-left: $base-spacing-unit;
  padding-right: $base-spacing-unit;
}

[class^="col-"] {
  flex: auto;
}

/* ========== MOBILE FIRST ========== */

// MOBILE
@for $i from 0 through $columns {
  .col-#{$i} {
    width: percentage( $i / $columns );
  }
}

@for $i from 0 through $columns {
  .push-#{$i} {
    margin-left: percentage( $i / $columns );
  }
}

@for $i from 0 through $columns {
  .pull-#{$i} {
    margin-right: percentage( $i / $columns );
  }
}


@each $key, $val in $mq {

  // TABLET
  @media(min-width: $tablet) {

    @for $i from 0 through $columns {
      .col-t-#{$i} {
        width: percentage( $i / $columns );
      }
    }

    @for $i from 0 through $columns {
      .push-t-#{$i} {
        margin-left: percentage( $i / $columns );
      }
    }

    @for $i from 0 through $columns {
      .pull-t-#{$i} {
        margin-right: percentage( $i / $columns );
      }
    }
  }


  // DESKTOP
  @media(min-width: $desktop) {

    @for $i from 0 through $columns {
      .col-d-#{$i} {
        width: percentage( $i / $columns );
      }
    }

    @for $i from 0 through $columns {
      .push-d-#{$i} {
        margin-left: percentage( $i / $columns );
      }
    }

    @for $i from 0 through $columns {
      .pull-d-#{$i} {
        margin-right: percentage( $i / $columns );
      }
    }
  }

}

@media(min-width: $desktop) {
  .d-hide {
    display: none !important;
  }

  .d-show {
    display: block !important;
  }
}