@layer utility {
  .w--item-xs {
    /* 24px minimum touch size for text line */
    width: var(--height-item-xs);
  }

  .w--item-sm {
    /* 30px save space for most used size */
    width: var(--height-item-sm);
  }

  .w--item-md {
    /* 34px most used size */
    width: var(--height-item-md);
  }

  .w--item-lg {
    /* 44px maximum touch size without waste */
    width: var(--height-item-lg);
  }

  .w--item-xl {
    /* 56px section-header bar */
    width: var(--height-item-xl);
  }

  .w--item--2xl {
    /* 64px navigation bar */
    width: var(--height-item-2xl);
  }
}