@import "mixins";

@mixin typography($font_size, $line-height) {
  font-size: $font_size;
  line-height: $line-height;
  font-style: normal;
  font-weight: bold;
  font-family: map-get($map: $font-families, $key: bold);
}

.h1 {
  @include typography(34px, 56px);
}

.h2 {
  @include typography(22px, 32px);
}

.h3 {
  @include typography(18px, 28px);
}

.h4 {
  @include typography(16px, 24px);
}

.h5 {
  @include typography(14px, 20px);
}

.h6 {
  @include typography(12px, 18px);
}

@mixin subtitle($font_size, $line-height) {
  font-family: map-get($map: $font-families, $key: medium);
  font-size: $font_size;
  line-height: $line-height;
  font-style: normal;
}

.sub1 {
  @include subtitle(16px, 28px);
}

.sub2 {
  @include subtitle(14px, 24px);
}

.sub3 {
  @include subtitle(12px, 20px);
}