%heading {
  font-family: $font-display;
  font-weight: 400;
}

.heading-1 {
  @extend %heading;
  font-size: 4.5rem;
  color: $color-grey-light-1;
  line-height: 1;
}

.heading-2 {
  @extend %heading;
  font-size: 4rem;
  font-style: italic;
  line-height: 1;

  &--light {
    color: $color-grey-light-1;
  }

  &--dark {
    color: $color-grey-dark-1;
  }
}

.heading-3 {
  @extend %heading;
  font-size: 1.6rem;
  color: $color-primary;
  text-transform: uppercase;
}

.heading-4 {
  @extend %heading;
  font-size: 1.9rem;

  &--light {
    color: $color-grey-light-1;
  }

  &--dark {
    color: $color-grey-dark-1;
  }
}

.btn {
  background-color: $color-primary;
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: $font-display;
  font-size: 1.5rem;
  text-transform: uppercase;
  padding: 1.8rem 3rem;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background-color: $color-primary-dark;
  }
}