/*** Grix : Efficient grid system for everyone ***/
// Base
.grix {
  display: grid;
  grid-auto-flow: row;
  grid-gap: 0.25rem;
}

@each $name, $value in $grix-breakpoints {
  @if ($name == 'xs') {
    @for $i from 1 through $grix-max-cols {
      .grix.#{$name}#{$i} {
        grid-template-columns: repeat($i, minmax(0, 1fr));
      }

      .col-#{$name}#{$i} {
        grid-column: auto / span $i;
      }

      .row-#{$name}#{$i} {
        grid-row: auto / span $i;
      }

      .pos-#{$name}#{$i} {
        grid-column-start: #{$i} !important;
      }

      .pos-row-#{$name}#{$i} {
        grid-row-start: #{$i} !important;
      }
    }
  } @else {
    @for $i from 1 through $grix-max-cols {
      @media #{$value} {
        .grix.#{$name}#{$i} {
          grid-template-columns: repeat($i, minmax(0, 1fr));
        }

        .col-#{$name}#{$i} {
          grid-column: auto / span $i;
        }

        .row-#{$name}#{$i} {
          grid-row: auto / span $i;
        }

        .pos-#{$name}#{$i} {
          grid-column-start: #{$i} !important;
        }

        .pos-row-#{$name}#{$i} {
          grid-row-start: #{$i} !important;
        }
      }
    }
  }
}

// Gutters
@each $name, $value in $grix-breakpoints {
  @if ($name == 'xs') {
    @each $num, $size in $grix-gutter {
      .gutter-#{$name}#{$num} {
        grid-gap: $size;
      }
    }
  } @else {
    @media #{$value} {
      @each $num, $size in $grix-gutter {
        .gutter-#{$name}#{$num} {
          grid-gap: $size;
        }
      }
    }
  }
}