.heading-primary {
  font-size: 5.4rem;
  font-family: $font-family-headings;
  font-weight: 700;
  text-transform: uppercase;
  color: transparent;
  text-shadow: $shadow-color;
  line-height: 120%;

  background-image: $color-gradient-regular;
  background-color: $color-grey-regular;
  -webkit-background-clip: text;
  background-clip: text;

  @include respond(tab-port) {
    font-size: 4.4rem;
  }
}

.heading-secondary {
  @extend .heading-primary;

  font-size: 4rem;
}

.heading-tertiary {
  @extend .heading-primary;

  font-size: 3.2rem;
}

.heading-quartenary {
  @extend .heading-primary;

  font-size: 2.8rem;
}

.heading-quinary {
  @extend .heading-primary;

  font-size: 2.2rem;

  letter-spacing: 1px;
  font-weight: 600;
}

.subheading {
  display: block;

  font-size: $font-size-larger;
  font-family: $font-family-headings;
  text-shadow: $text-shadow-grey;
}
