@layer utility {
  .w--inline-xs {
    width: calc(var(--font-size-xs) * var(--line-height-xs));
  }

  .w--inline-sm {
    width: calc(var(--font-size-sm) * var(--line-height-sm));
  }

  .w--inline-md {
    width: calc(var(--font-size-md) * var(--line-height-md));
  }

  .w--inline-lg {
    width: calc(var(--font-size-lg) * var(--line-height-lg));
  }

  .w--inline-xl {
    width: calc(var(--font-size-xl) * var(--line-height-xl));
  }

  .w--inline-xl {
    width: calc(var(--font-size-2xl) * var(--line-height-2xl));
  }
}