449: Hero spacing issues

[rjwtrmn]

• Hero background should be continuous with background of following section (i.e. no white margin between sections with colourful backgrounds)
• Spacing between hero content elements should now more closely match the Figma designs.
• Hero text content width should take up more of the space at larger screen sizes as per Figma.
• Vertical hero padding should adjust according to breakpoints (40px -> 48px -> 56px);

Fix #449

Test URLs: Design Page with hero margin issue

• Before: https://main--hlx-test--urfuwo.hlx.live/design/stories-resources
• After: https://449-hero-bottom-margin--hlx-test--urfuwo.hlx.live/design/stories-resources

L3

• Before: https://main--hlx-test--urfuwo.hlx.live/blog/ext-how-ai-powered-cybersecurity-combats-ai-threats
• After: https://449-hero-bottom-margin--hlx-test--urfuwo.hlx.live/blog/ext-how-ai-powered-cybersecurity-combats-ai-threats

L2

• Before: https://main--hlx-test--urfuwo.hlx.live/topics/sustainability
• After: https://449-hero-bottom-margin--hlx-test--urfuwo.hlx.live/topics/sustainability

L1

• Before: https://main--hlx-test--urfuwo.hlx.live/topics
• After: https://449-hero-bottom-margin--hlx-test--urfuwo.hlx.live/topics

[aem-code-sync[bot]]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed. In case there are problems, just click a checkbox below to rerun the respective action.

• [ ] Re-run PSI checks
• [ ] Re-sync branch

Commits

* [f119e9a](https://github.com/urfuwo/hlx-test/commit/f119e9a16ef0dd6a11af738d443d9f5547e77807) :white_check_mark: (latest) * [572e8bc](https://github.com/urfuwo/hlx-test/commit/572e8bcf5304f19dc955603348a2fae0391f12ae) :white_check_mark: * [b349044](https://github.com/urfuwo/hlx-test/commit/b3490449873f3de79ab2c4b9cf18aadd8025c42d) :white_check_mark: * [d1bd82a](https://github.com/urfuwo/hlx-test/commit/d1bd82a4ad1145871405a76ccdc80e69d7ae35b3) :white_check_mark:

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/ext-how-ai-powered-cybersecurity-combats-ai-threats
/design/stories-resources
/topics
/topics/sustainability

[rjwtrmn]

Sorry, please check why the score dropped for /design/stories-resources Is a CLS detected? Also is this caused by this PR?

I am not sure, seems there is some CLS when the featured article is rendered but not any more so than on main, and the lighthouse score seemed ok when I checked (97 performance) https://pagespeed.web.dev/analysis/https-449-hero-bottom-margin--hlx-test--urfuwo-hlx-live-design-stories-resources/xat59t7eev?form_factor=mobile

[saurabh-khare]

Sorry, please check why the score dropped for /design/stories-resources Is a CLS detected? Also is this caused by this PR?

I am not sure, seems there is some CLS when the featured article is rendered but not any more so than on main, and the lighthouse score seemed ok when I checked (97 performance) https://pagespeed.web.dev/analysis/https-449-hero-bottom-margin--hlx-test--urfuwo-hlx-live-design-stories-resources/xat59t7eev?form_factor=mobile

Ok I see the same when I manually run PSI. @mhaack Can there be some issue with PSI check?