@layer utility {
  .gap-xs {
    /* 2px */
    gap: calc(var(--spacing));
  }
  .gap-sm {
    /* 4px */
    gap: calc(var(--spacing) * 2);
  }
  .gap-md {
    /* 6px */
    gap: calc(var(--spacing) * 3);
  }
  .gap-lg {
    gap: calc(var(--spacing) * 2);
  }
  .gap-xl {
    gap: calc(var(--spacing) * 2.5);
  }
}