@mixin font-family-proxima-nova {
  font-family: 'Proxima Nova', $proxima-font-fallbacks;

  .proxima-not-loaded & {
    font-family: $proxima-font-fallbacks;
  }

  .proxima-subset-loaded & {
    font-family: 'Proxima Nova Subset', $proxima-font-fallbacks;
  }
}

@mixin font-family-circular {
  font-family: 'Circular', $circular-font-fallbacks;

  .circular-not-loaded & {
    font-family: $circular-font-fallbacks;
  }

  .circular-subset-loaded & {
    font-family: 'Circular Subset', $circular-font-fallbacks;
  }
}


@mixin hero-heading {
  @include font-family-circular();

  font-size:   $hero-heading-font-size-xs;
  font-weight: $headings-font-weight;
  line-height: $hero-heading-line-height-ratio-xs;

  @media (min-width: $screen-sm-min) {
    font-size: em($hero-heading-font-size);
    line-height: $hero-heading-line-height-ratio;
  }
}


@mixin hero-text {
  font-size:   $hero-text-font-size-xs;
  line-height: $hero-text-line-height-ratio-xs;

  @media (min-width: $screen-sm-min) {
    font-size: em($hero-text-font-size);
    line-height: $hero-text-line-height-ratio;
  }
}


@mixin h1 {
  @include font-family-circular();
  font-size: em($h1-font-size-xs);
  font-weight: $font-weight-medium;
  line-height: $h1-line-height-ratio-xs;

  @media (min-width: $screen-sm-min) {
    font-size: em($h1-font-size);
    line-height: $h1-line-height-ratio;
  }
}

@mixin h2 {
  font-size: em($h2-font-size-xs);
  font-weight: $headings-font-weight;
  line-height: $h2-line-height-ratio-xs;

  @media (min-width: $screen-sm-min) {
    font-size: em($h2-font-size);
    line-height: $h2-line-height-ratio;
  }
}

@mixin h3 {
  font-size: em($h3-font-size-xs);
  font-weight: $headings-font-weight;
  line-height: $h3-line-height-ratio-xs;

  @media (min-width: $screen-sm-min) {
    font-size: em($h3-font-size);
    line-height: $h3-line-height-ratio;
  }
}