[do not merge] OEL-1500: Vertical margins proof-of-concept.

Proof-of-concept solution for vertical margins.

Goals

Standardize vertical margins between elements.
Use margins for vertical space between elements, avoid padding where margin would be the more natural fit.
Stick with Bootstrap strategies as much as possible.
Stick with utility classes.
Avoid classes that must be applied conditionally depending on outside criteria (e.g. whether specific other element exists).
- -> Make vertical spacing still work correctly if some elements on the page are missing or empty.
Avoid element classes in rich text. (E.g. <p> tags typically come from rich text, and the editor won't be allowed to add classes.)
Avoid unnecessary wrappers.
Avoid custom contextual CSS that expects a specific DOM structure.
Semantic html where it makes sense - e.g. wrapping sections into <section> seems like a good idea.

Step 1:
- Use margin-bottom over margin-top, see https://getbootstrap.com/docs/5.0/content/reboot/#approach and https://csswizardry.com/2012/06/single-direction-margin-declarations/.
- Clean up one-off paddings and margins and replace them with standardized margins.
- Wrap main content sections into <section class="mb-5">, with <h2> title.
- I chose .mb-5, but we could choose a smaller margin.
Step 2:
- Introduce .eat-margin* utility classes that can absorb margins of first and last element more reliably than :first-child or :last-child rules.
- Add .children-eat-margin class to .row elements, to neutralize margins in column elements.
- Add gy-5 class for vertical margin between columns in mobile viewport.
- Add .bcl-text class as a wrapper for rich text, and set margin-top for h* headings within these rich text blocks. Use .eat-margin or eat-margin-top to neutralize the margin-top of the first element, or allow margin collapse with the margin-top of the parent element.
- Add margin-top to other elements as needed, now that we can absorb it with eat-margin.
Step 3:
- We could go fully to symmetric margins (top and bottom), now that we have the eat-margin utilities. But let's first see how far we get with one-directional margins.

Only applied to some content type pages for proof-of-concept.
Some pages show alternative solutions. E.g. for publication I add mt-5 to h2 headings instead of wrapping the sections.
I did not bother with tests for now. I would have to study how they work, out of scope for me.

I have more changes locally, but I want to limit the scope for now.

There was an alternative PR #363 by @planctus, with a similar goal. So what are the similarities and differences?

	This PR (#429)	Other PR (#363)
section concept	introduces "sections". One level of `<section>` tags	introduces "sections" concept. Two levels: bcl-section, bcl-section-group
classes and css for margins	uses existing bootstrap utility classes for margins	introduces new bcl-section and bcl-section-group classes for margins
disable margin of first/last child	new `eat-margin` utility classes to control first and last element margin. Direct child selector (`>`) prevents undesired side effect on nested child elements.	contextual CSS with `:first-parent`, `:last-parent` and similar to control first and last element margin. Direct child selector (`>`) used for some rules, but not all -> side effects on nested children are possible.
margin-top or margin-bottom?	margin-bottom as starting point, following common approach from bootstrap 5.	margin-top for section elements
local or global?	solution can be applied locally and piecemeal	solution should be applied to a larger part of the page for the desired outcome. E.g. we also have to add the classes in the sidebar.
strategy or solution?	overall more like a "strategy" for how to apply existing solutions, rather than a completely new solution.	new solution to replace existing classes.

What's the best way to apply the <section ..> wrapper? I made an include file, but it requires to capture the content first. Would be cool to have an alternative syntax using twig {% apply ... %}{% endapply %}.
Do we want the <section> wrapper, or would we rather add mt-5 to each <h2> that acts as a section title?
Are we ok with the proposed margins? Or is mt-5 too big?