@layer utility {
  .h-item-xs {
    /* 24px minimum touch size for text line */
    height: var(--height-item-xs);
  }
  .h-item-sm {
    /* 28px save space for most used size */
    height: var(--height-item-sm);
  }
  .h-item-md {
    /* 34px most used size */
    height: var(--height-item-md);
  }
  .h-item-lg {
    /* 44px maximum touch size without waste */
    height: var(--height-item-lg);
  }
  .h-item-xl {
    /* 64px navigation bar */
    height: var(--height-item-xl);
  }
  .h-item-2xl {
    /* 64px navigation bar */
    height: var(--height-item-2xl);
  }
  /* -------------- */
  .h-inline-xs {
    height: calc(var(--font-size-xs) * var(--line-height-xs));
  }
  .h-inline-sm {
    height: calc(var(--font-size-sm) * var(--line-height-sm));
  }
  .h-inline-md {
    height: calc(var(--font-size-md) * var(--line-height-md));
  }
  .h-inline-lg {
    height: calc(var(--font-size-lg) * var(--line-height-lg));
  }
  .h-inline-xl {
    height: calc(var(--font-size-xl) * var(--line-height-xl));
  }
  .h-inline-2xl {
    height: calc(var(--font-size-2xl) * var(--line-height-2xl));
  }
}