Hero layout options & Replace flex with grid utilities & other fixes

[AccessPaul]

Done as one PR because there were inter-related changes. Sorry for the size but this crosses off a few things on the Wilson wishlist.

Hero

• Add the 'Layout' option field to Hero component (as used on Simple Banner) which allows the editor to justify, center, left align or right align the contents of the hero.
• Limits the line length of hero content to max two thirds width on non-mobile devices.
• Fix issue where video backgrounds remain transparent after loading.

Grid utilities

• Introduces some CSS variables to match the width of grid columns after accounting for gaps, e.g. --two-of-three-cols
• Introduces some Tailwind custom width classes that use those variables, e.g. .w-2/3-cols
• Introduces some Tailwind custom grid template classes that define asymmetric two column layouts, e.g. .grid-cols-2-pref-l (2 columns where the left column is wider than the right)
• Update various templates to use these new utility classes and replace flexbox layouts

Tabs

• Fix the broken sticky position on vertical tabs nav.
• Use border colours that automatically change with the text colour to hopefully maintain contrast when using different backgrounds.

Default content

• Update the default content install files to use the new hero layout setting.

Tailwind config

• Correct the path to the JS files used by Tailwind when determining which classes to include.
• Add some useful background colours to the Tailwind safelist so they can be used safely in the CMS.

[AccessPaul]

The only thing I'm a little wary of is that there are a lot of <div> tags in templates that don't have any classes etc associated with them, which makes me wonder whether they're semantically necessary. I realise they're wrapping content and possibly grouping fields, so I haven't commented/blocked this PR, I just wonder whether a slightly different structure could work.

Yeah I wondered about this too. Because there's a lot of use of CSS grid for layout, we do need block-level tags around certain fields to form cells of the grid. Quite often there's no need to add styling to these so that's why they ended up as <div> tags with no classes. We could possibly use different HTML5 tags (I'm never fully confident when to use <section> tags for instance) or give them arbitrary CSS classes so they look more owned. As you say, needs some thought but not blocking right now.