Use scoped style for banner graphic

[nwmac]

Summary

Fixes #15822

Occurred changes and/or fixed issues

The BannerGraphic styles don't need to be global - this PR changes them to scoped - they are only used in this component.

We rename the top-level style (adding -area) so that any extensions built with older shell will not interfere going forward.

We also use a CSS var for the banner height to avoid issues with CSS specitivity.

Areas or cases that should be tested

Check the home page banner graphic appears correctly with the suse and modern brands/themes.

Bonus points - install the Harvester extension and check that the home page banner when ui-brand is set to suse is unaffected.

Things that are broken to validate, when the brand is suse and the Harvester UI Extension is loaded:

• The banner height becomes 200px and not 160px
• The banner text gets a 20px margin instead of 0 margin - so the text does not appear vertically centred in the banner

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
• The PR has been reviewed in terms of Accessibility
• The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base

[aalves08]

LGTM