// -------------------------- Shared all headings <h1>-<h6>
@mixin heading {
  @include optimizeLegibility;
  font-family: $fontFamily-headings;
}

// -------------------------- Heading 1 <h1>
@mixin heading-1 {
  @include heading;
  margin-bottom: 40px;
  font-size: 50px;
}

// -------------------------- Heading 2 <h2>
@mixin heading-2 {
  @include heading;
  margin-bottom: 30px;
  font-size: 40px;
}

// -------------------------- Heading 3 <h3>
@mixin heading-3 {
  @include heading;
  margin-bottom: 20px;
  font-size: 30px;
}

// -------------------------- Heading 4 <h4>
@mixin heading-4 {
  @include heading;
  margin-bottom: 15px;
  font-size: 24px;
}

// -------------------------- Heading 5 <h5>
@mixin heading-5 {
  @include heading;
  margin-bottom: 15px;
  font-size: 20px;
}

// -------------------------- Heading 6 <h6>
@mixin heading-6 {
  @include heading;
  margin-bottom: 10px;
  font-size: 18px;
}