/* Layer 3: composition primitives (Every Layout), content-agnostic, configured by custom properties in the markup.
   The settings do not inherit: a stack inside a centred stack is not centred itself. */
@property --stack-space { syntax: '*'; inherits: false; }
@property --stack-align { syntax: '*'; inherits: false; }
@property --cluster-wrap { syntax: '*'; inherits: false; }
@property --cluster-align { syntax: '*'; inherits: false; }
@property --cluster-justify { syntax: '*'; inherits: false; }
@property --cluster-space { syntax: '*'; inherits: false; }
@property --grid-columns { syntax: '*'; inherits: false; }
@property --grid-min { syntax: '*'; inherits: false; }
@property --grid-space { syntax: '*'; inherits: false; }
@property --center-max { syntax: '*'; inherits: false; }

.stack {
  display: flex;
  flex-direction: column;
  align-items: var(--stack-align, stretch);
  gap: var(--stack-space, var(--space-m));
}

.cluster {
  display: flex;
  flex-wrap: var(--cluster-wrap, wrap);
  align-items: var(--cluster-align, center);
  justify-content: var(--cluster-justify, flex-start);
  gap: var(--cluster-space, var(--space-s));
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, auto-fit), minmax(var(--grid-min, 0), 1fr));
  gap: var(--grid-space, var(--space-s));
}

.center {
  box-sizing: content-box;
  max-inline-size: var(--center-max, var(--column));
  margin-inline: auto;
}