// @grid-columns($columns, $columns-total, $grid-gutter)

// grid for viewport S & M:
// 6 columns / 28 units
//
//  |   |   |   |   |   |   |   |   |   |   |   |
//  | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 |
//  |   |   |   |   |   |   |   |   |   |   |   |
//
//
// grid for vieport L:
// 12 columns / 58 units
//
//  |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |
//  | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 2 | 3 |
//  |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |

@function grid-columns($columns, $columns-total, $grid-gutter: null) {
  $column-gutter-diff: ($grid-column-units - $grid-gutter-units);

  $column-units: ($columns * $grid-column-units) + (($columns - $column-gutter-diff) * $grid-gutter-units);
  $columns-total: ($columns-total * $grid-column-units) + (($columns-total - $column-gutter-diff) * $grid-gutter-units);

  // if grid gutter is provided use it in calculation
  @if ($grid-gutter) {
    @return calc(((#{$column-units} + (#{$grid-gutter} * #{$grid-gutter-units})) /#{$columns-total}) * 100%);
  }
  // if grid-gutter is not provided return default calculation
  @else {
    @return calc((#{$column-units}/#{$columns-total}) * 100%);
  }
}