.title-xs {
  font-size: var(--px-24);
  line-height: 93.333%;
  letter-spacing: 0.5px;

  @media (min-width: 48rem) {
    font-size: var(--px-30);
    line-height: 100%;
  }
}

.title-sm {
  font-size: var(--px-30);
  line-height: 93.333%;
  letter-spacing: 0.5px;

  @media (min-width: 48rem) {
    font-size: var(--px-36);
    line-height: 100%;
  }
}

.title-md {
  font-size: var(--px-30);
  line-height: 93.333%;
  letter-spacing: -0.5px;

  @media (min-width: 48rem) {
    font-size: var(--px-48);
    line-height: 100%;
  }
}

.title-lg {
  font-size: var(--px-30);
  line-height: 93.333%;
  letter-spacing: -1px;

  @media (min-width: 48rem) {
    font-size: var(--px-72);
    letter-spacing: -2px;
    line-height: 100%;
  }
}

.title-xl {
  font-size: var(--px-48);
  line-height: 83.333%;
  letter-spacing: -1px;

  @media (min-width: 48rem) {
    font-size: var(--px-72);
    letter-spacing: -2px;
    line-height: 105.556%;
  }

  @media (min-width: 62rem) {
    font-size: var(--px-96);
    line-height: 100%;
  } 
}

.title-xxl {
  font-size: var(--px-48);
  line-height: 83.333%;
  letter-spacing: 1px;

  @media (min-width: 48rem) {
    font-size: var(--px-72);
    line-height: 105.556%;
    letter-spacing: -2px;
  }

  @media (min-width: 62rem) {
    font-size: var(--px-128);
    line-height: 100%;
  }
}

.body-xs {
  font-size: var(--px-14);
}

.body-sm {
  font-size: var(--px-16);
}

.body-md {
  font-size: var(--px-16);
  
  @media (min-width: 48rem) {
    font-size: var(--px-20);
  }
}

.body-lg {
  font-size: var(--px-16);

  @media (min-width: 48rem) {
    font-size: var(--px-24);
  }
}

.font-heading {
  font-family: var(--wp--preset--font-family--phytaxis-bold);
  font-weight: 700;
}

.font-body {
  font-family: var(--wp--preset--font-family--suisse-intl);
  font-weight: 400;
}

.font-body-light {
  font-family: var(--wp--preset--font-family--suisse-intl);
  font-weight: 300;
}