FR: MT Half grey columns variant

[DanielaPedrochevd]

Agile Requirement
As a business owner, I want to display informational text together with an image about different technical parts of my trucks and give the option to my clients to get more information by clicking a button. This is already achievable with the columns component but the idea is that we have an additional variation to achieve the half grey background.

Description
Create a variation of the columns block to allow editors to select it and achieve the look and feel from the designs. https://www.figma.com/file/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?type=design&node-id=2243-112479&mode=dev

Acceptance Criteria

• As an editor, when I select the new variant, the image in the V2 Columns block is displayed upon and overlapping a grey square.
• The configuration of this new variant by content editors is the same as with the other variants.
• The solution follows the design specifications for mobile and desktop:

• Half left grey (Desktop)
• Half left grey (Mobile)
• Half right grey (Desktop)
• Half right grey (Mobile)

[girishdigrajkar]

Validated and able to get correct results hence, marking the user story to done status.

Observations Log:
Test URL: https://136-columns-variant--vg-macktrucks-com-rd--netcentric.hlx.page/drafts/syb/diesel-powertrains

1. Desktop: Content has text size issues
   Engines : 32 px size is expected whereas, it is 45px
   Mack engines are proven, fuel-efficient and clean-running. With muscle and low-end torque, these engines take businesses where they’ve never gone before. : 16px
   [Syb] There’s a different heading size being used here. Need to refactor that in a different user story, as
   [GD] : @DanielaPedrochevd / @shirin27 Please see above comment from Syb .. thanks .
2. Gap between ‘Engine’ and text should be 24px whereas, it is 12px across all viewports
   [Syb] This should be 12px, as per approved design. This part of the block isn’t changed, and shouldn’t be adjusted due to mistakes in design
3. “Explore” button expected size is 160px X 48px whereas, actual is 98.88px X 48px across all viewports
   [Syb] This seems to be regression from issue 133. It’s fixed [GD] Tested and passed
4. Tablet : There is extra white space in between two components which is clearly visible which is not in case of desktop
   [Syb] Fixed [GD] Tested and Passed
5. Mobile: There is extra white space after ‘Explore’ button; I.e. 88px padding ( as a result of 24px bottom padding of one component + 24px padding of lower component+ explore button padding 40px) is displayed after ‘Explore’ button whereas, expected is 32px.
   [Syb] This is a mistake in design, see screenshots. The padding should be 40px, and 32px between text and button. Not the other way around. [GD] OK
6. Desktop: Observation : In case of screen width more than 1440, the grey background is not extended to border; (edited)
   [Syb] It should be a square [GD] OK