flow.css

[class*="flow"] > * + * {
  --flow-space: var(--size-relative-6);
  margin-block-start: var(--flow-space, var(--size-relative-6));
}

/* --------------------------------- parent --------------------------------- */

.flow-xs > * + * {
  --flow-space: var(--size-relative-2);
}

.flow-sm > * + * {
  --flow-space: var(--size-relative-4);
}

.flow-lg > * + * {
  --flow-space: var(--size-relative-8);
}
.flow-xl > * + * {
  --flow-space: var(--size-relative-10);
}
.flow-2xl > * + * {
  --flow-space: var(--size-relative-12);
}

/* -------------------------------- children -------------------------------- */

/* flom because `m` is `w` upside down lol */

.flom-0 {
  --flow-space: 0;
}

.flom-xs {
  --flow-space: var(--size-relative-2);
}

.flom-md {
  --flow-space: var(--size-relative-6);
}

.flom-lg {
  --flow-space: var(--size-relative-8);
}

.flom-xl {
  --flow-space: var(--size-relative-10);
}

/* only enable if used

.flom-2xs {
  --flow-space: var(--size-relative-1);
}

.flom-sm {
  --flow-space: var(--size-relative-4);
}


.flom-2xl {
  --flow-space: var(--size-relative-12);
} */