// ==========================================================================
// ## COMPONENT: TYPEFACE
// ==========================================================================

/// @content Component specific classes for heading.
/// This file contains suite of classes like.
///
///   .heading {}       - Base heading font.
///   ...add others as you wish.
///

.heading,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-heading-family;
  font-style: $font-heading-style;
  font-weight: $font-heading-weight;
  color: inherit;
  text-decoration: none;
}

.heading {
  // Size variants
  h1,
  &.-h1 {
    font-size: rem(54px);
    line-height: 1.2;
    @media screen and (max-width: 750px) {
      font-size: rem(38px);
    }
  }

  h2,
  &.-h2 {
    font-size: rem(26px);
    @media screen and (max-width: 750px) {
      font-size: rem(22px);
    }
  }

  h3,
  &.-h3 {
    font-size: rem(19px);
  }

  h4,
  &.-h4 {
    font-size: rem(17px);
  }

  &.-bold {
    font-weight: 700;
  }

  &.-upper {
    text-transform: uppercase;
  }
}
