🐛 Fix Mobile Issues on Consulting Page Components

[ssw-yakshaver]

Requested by: @bettybondoc via YakShaver.ai 🦬
cc: @wicksipedia, @adamcogan, @brookjeynes-ssw

Hi Team!

Watch the video

Pain

Fix various mobile issues on the new consulting page template for the SSW website. The issues include spacing inconsistencies, alignment problems, and button formatting.

Acceptance Criteria

1. Reduce the gap between the breadcrumb and the title to match the prototype.
2. Ensure all spacing is tighter on mobile, including left and right margins.
3. Stack image text blocks in a single column on mobile.
4. Increase the size of the 'trusted by' logos on mobile and reduce the spacing between them.
5. Ensure buttons are consistently full width or set a cap limit to the text to prevent buttons from spanning two lines.
6. Make the accordion spacing consistent with the prototype.
7. Fix the large space between the image and text in various sections.
8. Ensure all sections are left-aligned for consistency.
9. Add more space between cards on mobile, especially for cards without borders.
10. Align buttons to the left if the text is left-aligned for consistency.

Reproduce Steps

1. Open the SSW website on a mobile device.
2. Navigate to the consulting page template.
3. Observe the gap between the breadcrumb and the title.
4. Compare the spacing and margins with the prototype.
5. Check the layout of image text blocks and ensure they are stacked in a single column.
6. Review the size and spacing of the 'trusted by' logos.
7. Test the button alignment and text wrapping.
8. Inspect the accordion spacing and compare it with the prototype.
9. Check the space between images and text in various sections.
10. Ensure all sections are left-aligned.
11. Review the spacing between cards, especially those without borders.
12. Check the alignment of buttons relative to the text.