.lighter {
  font-weight: $light-weight;
}

h1, .h1, .display-1 {
  font-size: mat-font-size($fontConfig, 'display-1');

  @include ui-typography-reposive($fontConfig-sm,$fontConfig-m,$fontConfig-l,'display-1');
}

h2, .h2, .display-2 {
  font-size: mat-font-size($fontConfig, 'display-2');
  margin-bottom: 1.25rem !important;

  @include ui-typography-reposive($fontConfig-sm,$fontConfig-m,$fontConfig-l,'display-2');
}

h3, .h3, .display-3 {
  font-size: mat-font-size($fontConfig, 'display-3');

  @include ui-typography-reposive($fontConfig-sm,$fontConfig-m,$fontConfig-l,'display-3');
}

h4, .h4, .display-4 {
  padding-top: 0.5rem;
  font-size: mat-font-size($fontConfig, 'display-4');

  @include ui-typography-reposive($fontConfig-sm,$fontConfig-m,$fontConfig-l,'display-4');
}

h5, .h5, .display-5 {
  font-size: mat-font-size($fontConfig, 'display-5');
  font-weight: mat-font-weight($fontConfig, 'display-5');

  @include ui-typography-reposive($fontConfig-sm,$fontConfig-m,$fontConfig-l,'display-5');
}