.display-xl {
  font-size: 120px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
}

h1 {
  font-size: $headings.h3.size
  font-weight: $headings.h3.weight
  line-height: $headings.h3.line-height
  letter-spacing: $headings.h3.letter-spacing
}

h2 {
  //font-size: $headings.h5.size
  font-size: $headings.h4.size
  font-weight: $headings.h4.weight
  line-height: $headings.h4.line-height
  letter-spacing: $headings.h4.letter-spacing
}

h3 {
  //font-size: $headings.h6.size
  font-size: $headings.h5.size
  font-weight: $headings.h5.weight
  line-height: $headings.h5.line-height
  letter-spacing: $headings.h5.letter-spacing
}

h4 {
  //font-size: $headings.subheading.size
  font-size: $headings.h6.size
  font-weight: $headings.h6.weight
  line-height: $headings.h6.line-height
  letter-spacing: $headings.h6.letter-spacing
}

h5 {
  font-size: $headings.subheading.size
  font-weight: $headings.subheading.weight
  line-height: $headings.subheading.line-height
  letter-spacing: $headings.subheading.letter-spacing
}

h6 {
  //font-size: $headings.body-2.size
  font-size: $headings.body-2.size
  font-weight: $headings.body-2.weight
  line-height: $headings.body-2.line-height
  letter-spacing: $headings.body-2.letter-spacing
}

p {
  font-size: $headings.body-1.size
  font-weight: $headings.body-1.weight
}

@media $display-breakpoints.sm-and-down {

  .display-xl {
    font-size: 120px * 0.7 !important
    line-height: 1 !important
  }

  .display-4 {
    font-size: $headings.h1.size * 0.6 !important
    line-height: 1 !important
  }

  .display-3 {
    font-size: $headings.h2.size * 0.7 !important
    line-height: 1 !important
  }

  .display-2 {
    font-size: $headings.h3.size * 0.6 !important
    line-height: $headings.h4.line-height * 0.6 !important
  }

  .display-1 {
    font-size: $headings.h4.size * 0.7 !important
    //line-height: $headings.h4.line-height!important
  }

  h1 {
    font-size: $headings.h3.size * 0.6
    line-height: $headings.h3.line-height * 0.6
  }

  //
  h2 {
    font-size: $headings.h4.size * 0.7
  }

  //
  h3 {
    font-size: $headings.h5.size * 0.9
    line-height: $headings.h5.line-height * 0.9
  }
}

@media $display-breakpoints.xs-only {
  .display-4 {
    font-size: $headings.h1.size * 0.3 !important
    line-height: 1 !important
  }

  .display-3 {
    font-size: $headings.h2.size * 0.5 !important
    line-height: 1 !important
  }
}