$grid-slug: vf-u-grid__ !default;


$vf-breakpoints-map: map-remove($vf-breakpoints-map, '$vf-breakpoint--xs', '$vf-breakpoint--xl');

@each $name, $size in $vf-breakpoints-map {
  @media (min-width: $size) {

    $name: str-replace($name, 16);

    @for $i from 1 through 11 {
      .#{$grid-slug}col--start-#{$i}--#{$name} {
        grid-column-start: $i;
      }
    }
    @for $i from 2 through 11 {
      .#{$grid-slug}col--end-#{$i}--#{$name} {
        grid-column-end: $i;
      }
    }

    @for $i from 1 through 11 {
      .#{$grid-slug}col--span-#{$i}--#{$name} {
        grid-column-end: span $i;
      }
    }

    @for $i from 1 through 11 {
      .#{$grid-slug}row--start-#{$i}--#{$name} {
        grid-row-start: $i;
      }
    }
    @for $i from 2 through 11 {
      .#{$grid-slug}row--end-#{$i}--#{$name} {
        grid-row-end: $i;
      }
    }

    @for $i from 1 through 11 {
      .#{$grid-slug}row--span-#{$i}--#{$name} {
        grid-row-end: span $i;
      }
    }

  }
};