%heading {
  margin-top: 0; // 1
  margin-bottom: $headings-margin-bottom;
  font-family: $headings-font-family;
  font-style: $headings-font-style;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  color: $headings-color;
}

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

h1 {
  @extend %heading;
  font-size: $h1-font-size
}

h2 {
  @extend %heading;
  font-size: $h2-font-size
}

h3 {
  @extend %heading;
  font-size: $h3-font-size
}

h4 {
  @extend %heading;
  font-size: $h4-font-size
}

h5 {
  @extend %heading;
  font-size: $h5-font-size
}

h6 {
  @extend %heading;
  font-size: $h6-font-size
}

.display-1 {
  @extend %display-heading;
  font-size: $display-1-font-size;
}

.display-2 {
  @extend %display-heading;
  font-size: $display-2-font-size;
}

.display-3 {
  @extend %display-heading;
  font-size: $display-3-font-size;
}

.display-4 {
  @extend %display-heading;
  font-size: $display-4-font-size;
}

.lead {
  font-size: $lead-font-size;
  font-weight: $lead-font-weight;
}

.small {
  font-size: $font-size-sm;
}

p {
  margin-top: 0;
  line-height: $paragraph-line-height;
  margin-bottom: $paragraph-margin-bottom;
}

@media (max-width: breakpoint('sm')) { //TODO: define mobile typography variables
  .display-1 { font-size: 3.8rem; }
  .display-2 { font-size: 3rem; }
  .display-3 { font-size: 2.6rem; }
  .display-4 { font-size: 2.4rem; }

  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.65rem; }
  h4 { font-size: 1.4rem; }
  h5 { font-size: 1.25rem; }
  h6 { font-size: 1.1rem; }

  .lead { font-size: 1.2rem }
}

::selection {
  background-color: $light-gray-1;
}