@layer utilities {
  .pad        { padding: var(--space-4) var(--space-6); }
  .pad-block  { padding-block: var(--space-4); }
  .pad-inline { padding-inline: var(--space-6); }

  .text-center { text-align: center; }
  .text-muted  { color: var(--color-ink-secondary); }

  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .gap { column-gap: var(--space-4); row-gap: var(--space-4); }

  .for-screen-reader {
    block-size: 1px;
    inline-size: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .hide-mobile { @media (max-width: 39.99rem) { display: none; } }
  .hide-desktop { @media (min-width: 40rem)   { display: none; } }
}