// define a set of classes for the grid system and responsive behaviour
@mixin build-grid-cols($columns-number: $grid-columns-number, $breakpoints: $grid-breakpoints) {
  @for $i from 1 through $columns-number {
    @include colspan($i);

    @for $j from $i through $columns-number {
      @include col-start-end($i, $j);
      @include row-start-end($i, $j);
    }
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      @for $i from 1 through $columns-number {
        @include colspan($i, $infix);

        @for $j from $i through $columns-number {
          @include col-start-end($i, $j, $infix);
          @include row-start-end($i, $j, $infix);
        }
      }
    }
  }
}

@mixin make-grid-breakpoints($columns-number: $grid-columns-number, $breakpoints: $grid-breakpoints) {
  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      @include make-grid(map-get($grid-breakpoints-grid, $breakpoint), map-get($grid-breakpoints-gap, $breakpoint));

      @for $i from 1 through $columns-number {
        &.cols#{$infix}-#{$i} {
          @include make-grid($i, map-get($grid-breakpoints-gap, $breakpoint));
        }
      }
    }
  }
}

@mixin colspan($cols, $breakpoint: null) {
  @if ($breakpoint == null) {
    .colspan-#{$cols} {
      grid-column: span #{$cols};
    }
  }@else{
    .colspan#{$breakpoint}-#{$cols} {
      grid-column: span #{$cols};
    }
  }
}

@mixin row-start-end($col-start, $col-end, $breakpoint: null) {
  @if ($breakpoint == null) {
    .row-start-#{$col-start}-end-#{$col-end} {
      grid-row: #{$col-start} / ($col-end+1);
    }
  }@else{
    .row#{$breakpoint}-start-#{$col-start}-end-#{$col-end} {
      grid-row: #{$col-start} / ($col-end+1);
    }
  }
}

@mixin col-start-end($col-start, $col-end, $breakpoint: null) {
  @if ($breakpoint == null) {
    .col-start-#{$col-start}-end-#{$col-end} {
      grid-column: #{$col-start} / ($col-end+1);
    }
  }@else{
    .col#{$breakpoint}-start-#{$col-start}-end-#{$col-end} {
      grid-column: #{$col-start} / ($col-end+1);
    }
  }

}