.var-col {
  transition: all 0.25s;
}

.create-col(@i) when (@i =< 24) {
  .var-col--span-@{i} {
    flex: 0 0 @i * (100% / 24);
  }

  .var-col--offset-@{i} {
    margin-left: @i * (100% / 24);
  }

  .create-col(@i + 1);
}

.create-responsive-col(@i, @mode) when (@i =< 24) {
  .var-col--span-@{mode}-@{i} {
    flex: 0 0 @i * (100% / 24);
  }

  .var-col--offset-@{mode}-@{i} {
    margin-left: @i * (100% / 24);
  }

  .create-responsive-col(@i + 1,@mode);
}

.create-col(1);

@media only screen and (max-width: 767px) {
  .create-responsive-col(1, xs);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .create-responsive-col(1, sm);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .create-responsive-col(1, md);
}

@media only screen and (min-width: 1200px) and (max-width: 1919px) {
  .create-responsive-col(1, lg);
}

@media only screen and (min-width: 1920px) {
  .create-responsive-col(1, xl);
}