:where(.new-typography-design) {
  h1, .h1 {
    font-size: var(--h1-font-size-mobile);
    line-height: 1.2;
  }
  h2, .h2 {
    font-size: var(--h2-font-size-mobile);
    line-height: 1.2;
  }
  h3, .h3 {
    font-size: var(--h3-font-size-mobile);
    line-height: 1.2;
  }
  h4, .h4 {
    font-size: var(--h4-font-size-mobile);
    line-height: 1.4;
  }
  h5, .h5 {
    font-size: var(--h5-font-size-mobile);
    line-height: 1.4;
  }
  h6, .h6 {
    font-size: var(--h6-font-size-mobile);
    line-height: 1.4;
  }
  .text-tiny{
    font-size: var(--font-size-tiny-mobile);
  }
  .text-tiny, .text-small, .text-medium, .text-regular, .text-large {
    line-height: 1.5;
  }
  @media (min-width: 1024px) {
    h1, .h1 {
      font-size: var(--h1-font-size);
      line-height: 1.2;
    }
    h2, .h2 {
      font-size: var(--h2-font-size);
      line-height: 1.2;
    }
    h3, .h3 {
      font-size: var(--h3-font-size);
      line-height: 1.2;
    }
    h4, .h4 {
      font-size: var(--h4-font-size);
      line-height: 1.3;
    }
    h5, .h5 {
      font-size: var(--h5-font-size);
      line-height: 1.4;
    }
    h6, .h6 {
      font-size: var(--h6-font-size);
      line-height: 1.4;
    }
    .text-default{
      font-size: var(--base-font-size);
    }
    .text-tiny{
      font-size: var(--font-size-tiny);
    }
    .text-regular{
      font-size: var(--font-size-regular);
    }
  }
}