@import "variables";

// get our bases established
@each $-flexi-h, $-flexi-font in $flexi-heading-sizes {
  #{$-flexi-h} {
    font-size: $-flexi-font;
  }
}

// itterate through each screensize
@each $-flexi-size, $-flexi-range in $-flexi-ranges {
  @media (min-width: #{nth($-flexi-range, 1)}) and (max-width: #{nth($-flexi-range, 2)}) {
    @each $-flexi-h, $-flexi-font in $flexi-heading-sizes {
      .#{$-flexi-size}-#{$-flexi-h} {
        font-size: $-flexi-font;
      }
    }
  }
}