/* ==========================================================================
   OBJECTS · CLUSTER — lays children out in a row that wraps, with a shared gap.
   For nav items, chip rows, byline metadata, button groups. Alignment and
   justification are modifiers.
   ========================================================================== */

.o-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap, var(--space-xs));
  --gap: var(--space-xs);
}

.o-cluster--2xs { --gap: var(--space-2xs); }
.o-cluster--xs  { --gap: var(--space-xs); }
.o-cluster--sm  { --gap: var(--space-sm); }
.o-cluster--md  { --gap: var(--space-md); }

.o-cluster--baseline { align-items: baseline; }
.o-cluster--start    { justify-content: flex-start; }
.o-cluster--center   { justify-content: center; }
.o-cluster--end      { justify-content: flex-end; }
.o-cluster--between  { justify-content: space-between; }