h1, .heading-1,
h2, .heading-2,
h3, .heading-3 {
  font-family: $brand-font-family-bold;
  font-weight: 400;
  margin-bottom: 10px;
}

h1, .heading-1 {
  @include font-size($font-heading-1-mobile);

  @include tablet {
    @include font-size($font-heading-1);
  }
}

h2, .heading-2 {
  @include font-size($font-heading-2-mobile);
  margin-top: 0;

  @include tablet {
    @include font-size($font-heading-2);
  }
}

h3, .heading-3 {
  @include font-size($font-heading-3);

  @include tablet {
    @include font-size($font-heading-3);
  }
}

.theme-red {
  h1, .heading-1,
  h2, .heading-2,
  h3, .heading-3 {
    color: theme-color("red");
  }
}

.theme-yellow {
  h1, .heading-1,
  h2, .heading-2,
  h3, .heading-3 {
    color: theme-color("yellow");
  }
}

.theme-blue {
  h1, .heading-1,
  h2, .heading-2,
  h3, .heading-3 {
    color: theme-color("blue");
  }
}

.theme-pink {
  h1, .heading-1,
  h2, .heading-2,
  h3, .heading-3 {
    color: theme-color("pink");
  }
}

.theme-purple {
  h1, .heading-1,
  h2, .heading-2,
  h3, .heading-3 {
    color: theme-color("purple");
  }
}

.theme-green {
  h1, .heading-1,
  h2, .heading-2,
  h3, .heading-3 {
    color: theme-color("green");
  }
}

a {
  &.heading-1,
  &.heading-2,
  &.heading-3 {
    text-decoration: none;
    display: block;
  }
}