Refresh: make pixel transitions a standalone component [fix #15524]

[craigcook]

One-line summary

Changes the pixel transition from a decoration at the top of a section to a standalone element between sections. This solves problems of needing elements to overlap each other and needing to create space for that overlap. The trade-off is that this now needs to have background colors declared rather than inheriting from the adjacent sections, but that's a fair trade IMO.

Issue / Bugzilla link

15524

Testing

http://localhost:8000/en-US/ http://localhost:8000/en-US/about/

Ensure switch M24_WEBSITE_REFRESH is ON

[craigcook]

For discussion: For now I've added theme classes for pretty much the entire color palette. However, we probably don't need all these options at this stage and it could be reduced only to the backgrounds we've defined in https://github.com/mozilla/bedrock/blob/main/media/css/m24/theme.scss ... so do we go all the way with every color now, or only do the themes we need and we can always add more when/if we need more?

The more I think about it, I'm leaning toward the latter but wanted to pose the question before I made the change.