Adjust the padding of the Banner pattern

[nielslange]

Note

In #9877, we improved spacing and centring for mobile devices. While testing the WooCommerce Blocks 10.6.0 release, I noticed that the current padding leads to a very narrow text section when viewing the Banner pattern on a mobile device. This issue aims to decrease the padding to prevent that the user has to scroll too much because of a text that is displayed too narrow.

Expected behaviour

I expect the padding to be smaller so that I can see more text and don't have to scroll too much.

Current behaviour

Currently, there's too much left and right padding leading to a narrow text and forcing the user to scroll more.

Steps to reproduce

1. Create a test page.
2. Add the Banner pattern to it.
3. Switch the preview to Mobile.
4. See that the text is very narrow.

Proposed solution

I propose changing the left and right padding from 4 to 1 as seen in the screenshot below.

Screenshot

Current behaviour (left- and right padding of 4)

Proposed behaviour (left- and right padding of 1)

cc: @albarin (internal thread: p1688562657170209/1688552807.622379-slack-C02UBB1EPEF)