@for $i from 1 through 24 {
  .zk-col-#{$i} {
    float: left;
    box-sizing: border-box;
    width: percentage(1 / 24 * $i);
  }
  .zk-col-push-#{$i} {
    position: relative;
    left: percentage(1 / 24 * $i);
  }
  .zk-col-pull-#{$i} {
    position: relative;
    right: percentage(1 / 24 * $i);
  }
}

@media (max-width: 768px) {
  @for $i from 1 through 24 {
    .zk-col-xs-#{$i} {
      width: percentage(1 / 24 * $i);
    }
    .zk-col-offset-#{$i},
    .zk-col-offset-xs-#{$i} {
      margin-left: percentage(1 / 24 * $i);
    }
  }
}

@media (min-width:768px) {
  @for $i from 1 through 24 {
    .zk-col-sm-#{$i} {
      width: percentage(1 / 24 * $i);
    }
    .zk-col-xs-offset-#{$i} {
      margin-left: percentage(1 / 24 * $i);
    }
    .zk-col-xs-pull-#{$i} {
      position: relative;
      right: percentage(1 / 24 * $i);
    }
    .zk-col-xs-push-#{$i} {
      position: relative;
      left: percentage(1 / 24 * $i);
    }
  }
}

@media (min-width:992px) {
  @for $i from 1 through 24 {
    .zk-col-md-#{$i} {
      width: percentage(1 / 24 * $i);
    }
    .zk-col-md-offset-#{$i} {
      margin-left: percentage(1 / 24 * $i);
    }
    .zk-col-md-pull-#{$i} {
      position: relative;
      right: percentage(1 / 24 * $i);
    }
    .zk-col-md-push-#{$i} {
      position: relative;
      left: percentage(1 / 24 * $i);
    }
  }
}

@media (min-width:1200px) {
  @for $i from 1 through 24 {
    .zk-col-lg-#{$i} {
      width: percentage(1 / 24);
    }
    .zk-col-xs-offset-#{$i} {
      margin-left: percentage(1 / 24 * $i);
    }
    .zk-col-xs-pull-#{$i} {
      position: relative;
      right: percentage(1 / 24 * $i);
    }
    .zk-col-xs-push-#{$i} {
      position: relative;
      left: percentage(1 / 24 * $i);
    }
  }
}