Feat / a11y improve the contrast of non-texts

[MelissaDTH]

This PR

OTT-416

• Enhances the readability of the description of media items and the featured card title
  • We do this by updating the text-shadows, lineair-gradient and decreasing the max-width of the info container
• Adds a solid background color to the header component if this is not set via the JW config
  • I think that this change can be pretty opinionated, it has been discussed together with Stephan. This way we can ensure accessibility for now, but if we do not prefer this solution, we should discuss this a bit further.

Before both these changes:

After the changes:

[langemike]

I think we should remove @include responsive.tablet-only() { width: 350px; } couple of lines further. Because it makes the text description really narrow.

So you agree @royschut ? If so, can you make perform this change.

[royschut]

Wouldn't that break the purpose again, making text appear above the image? @langemike

[langemike]

That is true. I think due to the length of the text it gives a really unproportionate feeling. But with a small text it feels more balanced. I have to agree with you. Example with small text:

[royschut]

I think we should actually show less of the image and more of the text. But that's a design (UI) choice.