.row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  > [class*='col-'] {
    box-sizing: border-box;
  }
}
@cols: 5, 10, 15, 20, 25, 30, 100/3, 35, 40, 45, 50, 55, 60, 65, 100 * (2/3), 70,
  75, 80, 85, 90, 95, 100;

@media all and (max-width: 600px) {
  .row {
    .col-auto {
      width: 100%;
    }
    .-(@i: length(@cols)) when (@i > 0) {
      @divider: e(extract(@cols, @i));
      @className: `Math.floor(@{divider}) `;
      @n: `100/parseFloat(@{divider}) `;
      @n-1: @n - 1;
      .col-@{className} {
        width: ~'@{divider}%';
        width: ~'-webkit-calc((100% - 16px*@{n-1}) / @{n})';
        width: ~'calc((100% - 16px*@{n-1}) / @{n})';
      }
      &.no-gutter {
        .col-@{className} {
          width: ~'@{divider}%';
        }
      }
      .-((@i - 1));
    }
    .-;
    .--(@j: 1) when (@j < length(@cols)) {
      @divider: e(extract(@cols, @j));
      @className: `Math.floor(@{divider}) `;
      .col-auto:nth-last-child(@{j}),
      .col-auto:nth-last-child(@{j}) ~ .col-auto {
        @j-1: @j - 1;
        width: 100% / @j;
        width: ~'-webkit-calc((100% - 16px*@{j-1}) / @{j})';
        width: ~'calc((100% - 16px*@{j-1}) / @{j})';
      }
      &.no-gutter {
        .col-auto:nth-last-child(@{j}),
        .col-auto:nth-last-child(@{j}) ~ .col-auto {
          width: 100% / @j;
        }
      }
      .--((@j + 1));
    }
    .--;
  }
}

@media all and (max-width: 992px) and (min-width: 601px) {
  .row {
    .-(@i: length(@cols)) when (@i > 0) {
      @divider: e(extract(@cols, @i));
      @className: `Math.floor(@{divider}) `;
      @n: `100/parseFloat(@{divider}) `;
      @n-1: @n - 1;
      .tablet-@{className} {
        width: ~'@{divider}%';
        width: ~'-webkit-calc((100% - 16px*@{n-1}) / @{n})';
        width: ~'calc((100% - 16px*@{n-1}) / @{n})';
      }
      &.no-gutter {
        .tablet-@{className} {
          width: ~'@{divider}%';
        }
      }
      .-((@i - 1));
    }
    .-;
    .--(@j: 1) when (@j < length(@cols)) {
      .tablet-auto:nth-last-child(@{j}),
      .tablet-auto:nth-last-child(@{j}) ~ .col-auto {
        @j-1: @j - 1;
        width: 100% / @j;
        width: ~'-webkit-calc((100% - 16px*@{j-1}) / @{j})';
        width: ~'calc((100% - 16px*@{j-1}) / @{j})';
      }
      &.no-gutter {
        .tablet-auto:nth-last-child(@{j}),
        .tablet-auto:nth-last-child(@{j}) ~ .tablet-auto {
          width: 100% / @j;
        }
      }
      .--((@j + 1));
    }
    .--;
  }
}

@media all and (min-width: 993px) {
  .row {
    .-(@i: length(@cols)) when (@i > 0) {
      @divider: e(extract(@cols, @i));
      @className: `Math.floor(@{divider}) `;
      @n: `100/parseFloat(@{divider}) `;
      @n-1: @n - 1;
      .desktop-@{className} {
        width: ~'@{divider}%';
        width: ~'-webkit-calc((100% - 16px*@{n-1}) / @{n})';
        width: ~'calc((100% - 16px*@{n-1}) / @{n})';
      }
      &.no-gutter {
        .desktop-@{className} {
          width: ~'@{divider}%';
        }
      }
      .-((@i - 1));
    }
    .-;
    .--(@j: 1) when (@j < length(@cols)) {
      .desktop-auto:nth-last-child(@{j}),
      .desktop-auto:nth-last-child(@{j}) ~ .col-auto {
        @j-1: @j - 1;
        width: 100% / @j;
        width: ~'-webkit-calc((100% - 16px*@{j-1}) / @{j})';
        width: ~'calc((100% - 16px*@{j-1}) / @{j})';
      }
      &.no-gutter {
        .desktop-auto:nth-last-child(@{j}),
        .desktop-auto:nth-last-child(@{j}) ~ .desktop-auto {
          width: 100% / @j;
        }
      }
      .--((@j + 1));
    }
    .--;
  }
}