@layer utilities {
  /* Flexbox */
  .flex { display: flex; }
  .flex-column { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-1 { flex: 1; }

  /* Alignment */
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .align-center { align-items: center; }
  .align-start { align-items: start; }
  .align-baseline { align-items: baseline; }

  /* Gap */
  .gap { gap: var(--space-4); }
  .gap-half { gap: var(--space-2); }
  .gap-tight { gap: var(--space-1); }

  /* Margins — block */
  .margin-block { margin-block: var(--space-4); }
  .margin-block-start { margin-block-start: var(--space-4); }
  .margin-block-end { margin-block-end: var(--space-4); }
  .margin-block-start-double { margin-block-start: var(--space-6); }
  .margin-none { margin: 0; }

  /* Sizing */
  .full-width { inline-size: 100%; }

  /* Visibility */
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  [hidden] { display: none !important; }
}