Stack object exceptions

[Jamiewarb]

The Stack object currently applies a consistent margin-top to all child elements.

It's possible to create a set of exception rules for a Stack that change the margin based on element context. An example would be having 1.5rem margin between p tags, and 2rem margin p and h2 tags.

This can be achieved using exception rules that take precedence over the default rule.

e.g.

.o-stack > * + * {
  margin-top: 1.5rem;
}

.o-stack > p + h2 {
  margin-top: 2rem;
}

or another example, using CSS variables this time:

.o-stack {
  --stack-space: 1.5rem;
}

.o-stack > * + * {
  margin-top: var(--stack-space);
}

h2,
h2 + p {
  --stack-space: 2rem;
}