// Creates responsive sizes like:
// .vf-width__10 { width: 10%; }
// .vf-width__10--sm { width: 10%; }

@for $i from 1 through 20 {
  .vf-u-width__#{$i * 5} { width: $i * 5%; }
}

@media (min-width: $vf-breakpoint--xs) {
  @for $i from 1 through 20 {
    .vf-u-width__#{$i * 5}--xs { width: $i * 5%; }
  }
}

@media (min-width: $vf-breakpoint--sm) {
  @for $i from 1 through 20 {
    .vf-u-width__#{$i * 5}--sm { width: $i * 5%; }
  }
}

@media (min-width: $vf-breakpoint--md) {
  @for $i from 1 through 20 {
    .vf-u-width__#{$i * 5}--md { width: $i * 5%; }
  }
}

@media (min-width: $vf-breakpoint--lg) {
  @for $i from 1 through 20 {
    .vf-u-width__#{$i * 5}--lg { width: $i * 5%; }
  }
}

@media (min-width: $vf-breakpoint--xl) {
  @for $i from 1 through 20 {
    .vf-u-width__#{$i * 5}--xl { width: $i * 5%; }
  }
}