Life with Sunstar page & columns refactor

[dnbute]

Please always provide the GitHub issue(s) your PR is for, as well as test URLs where your change can be observed (before and after):

Fixes #

Changelog:

• Added "autoblocking" tohero banner overlap so the text is on the right if it was authored in the right column
• Added variant to invert even numbered columns in narrow view (as opposed to all the columns)
• Added video modal support to columns if there is an appropriate anchor after the picture in the document
• Refactored the columns block
• Fixed bug with modals opening two videos

Test URLs:

• Original: https://www.sunstar.com/about/life-with-sunstar

• Before: https://main--sunstar--hlxsites.hlx.live/about/life-with-sunstar

• After: https://life-with-sunstar-hero--sunstar--hlxsites.hlx.live/about/life-with-sunstar

• If you are adding a new block or a variation to an existing block, please fill below:

  Block library path: https://--sunstar--hlxsites.hlx.page/tools/sidekick/library.html?plugin=blocks&path=/sidekick/blocks/&index=0

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some test suites that validate the page speed.
In case there are problems, just click the checkbox below to rerun the respective action.

• Re-run PSI Checks

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[aem-code-sync]

Page	Scores	Audits	Google
/about/life-with-sunstar

[github-actions]

🔸 7 visual differences detected

• / (main vs branch)
  Expected an image 1280px by 4099px, received 1280px by 4056px. 395236 pixels (ratio 0.08 of all image pixels) are different.
• /brands (main vs branch)
  Expected an image 1280px by 3735px, received 1280px by 3657px. 699819 pixels (ratio 0.15 of all image pixels) are different.
• /about/history (main vs branch)
  Expected an image 1280px by 13448px, received 1280px by 14727px. 2062429 pixels (ratio 0.11 of all image pixels) are different.
• /careers (main vs branch)
  Expected an image 1280px by 5995px, received 1280px by 5972px. 92246 pixels (ratio 0.02 of all image pixels) are different.
• /healthy-thinking (main vs branch)
  Expected an image 1280px by 6097px, received 1280px by 6075px. 689438 pixels (ratio 0.09 of all image pixels) are different.
• /sidekick/blocks/columns (main vs branch)
  Expected an image 1280px by 10880px, received 1280px by 10923px. 914739 pixels (ratio 0.07 of all image pixels) are different.
• /sidekick/blocks/sections (main vs branch)
  Expected an image 1312px by 9152px, received 1312px by 9139px. 163624 pixels (ratio 0.02 of all image pixels) are different.

The diff images are attached in the artifact