/* ==========================================================================
   #HEADINGS
   ========================================================================== */

/**
 * Utility classes to put specific font-size values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .au-u-h1 {}
 *   .au-u-h2 {}
 *   .au-u-h3 {}
 *   .au-u-h4 {}
 *   .au-u-h5 {}
 *   .au-u-h6 {}
 *   .au-u-h-functional {}
 */

.au-u-h1 {
  @include au-font-size(var(--au-h1-small), $important: true);

  @include mq(small) {
    @include au-font-size(var(--au-h1-medium), $important: true);
  }

  @include mq(medium) {
    @include au-font-size(var(--au-h1), $important: true);
  }
}

.au-u-h2 {
  @include au-font-size(var(--au-h2-small), $important: true);

  @include mq(medium) {
    @include au-font-size(var(--au-h2), $important: true);
  }
}

.au-u-h3 {
  @include au-font-size(var(--au-h3-small), $important: true);

  @include mq(medium) {
    @include au-font-size(var(--au-h3), $important: true);
  }
}

.au-u-h4 {
  @include au-font-size(var(--au-h4), $important: true);
}

.au-u-h5 {
  @include au-font-size(var(--au-h5), $important: true);
}

.au-u-h6 {
  @include au-font-size(var(--au-h6), $important: true);
}

.au-u-h-functional {
  @include au-font-size(var(--au-h-functional-small), $important: true);

  @include mq(medium) {
    @include au-font-size(var(--au-h-functional), $important: true);
  }
}