feature(content-band-list-spacing-issue): Content band list spacing issue.

[nimithshetty17]

Issue

Fixes #MERATIVE-862

Description

When authoring the product family pages and adding the content band list with icons, there is no spacing/padding between the first and second row if more than three cards are added into this section.

Changed

• Figma Link - https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?type=design&node-id=1459-14993&mode=design&t=BbstBwzZqcXHN2Aw-0

Test URLs

• Before (Changes from main): https://main--merative2--hlxsites.hlx.page/merge-imaging
• After (Changes from this PR): https://content-band-list-spacing-issue--merative2--nimithshetty17.hlx.page/merge-imaging

Testing Instruction

To test the content band list spacing and its responsiveness with respect to the design across all devices.

[aem-code-sync[bot]]

Hello, I'm Franklin 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[bot]]

Page	Scores	Audits	Google
/merge-imaging		Lighthouse returned error: ERRORED_DOCUMENT_REQUEST. Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. (Status code: 404)

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/merge-imaging

[nimithshetty17]

@sharathmrft - The mobile icon alignment issue is fixed.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/merge-imaging

[nimithshetty17]

@sharathmrft - Image alignment issue is fixed.

[sachinmesh]

Checking the content band only, the watch video CTA play icon is wrong

It should be a filled one, like this

Rest looks good to me.

@proeung @nimithshetty17 @sharathmrft

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/merge-imaging

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/merge-imaging

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/merge-imaging