Adjust the image of the Discount banner with image pattern

[nielslange]

Note

In #9957, we introduced the Discount banner with image pattern. While testing the WooCommerce Blocks 10.6.0 release, I noticed that the image is overlapping in the mobile preview in the page editor.

Expected behaviour

I expect the image not to overlap in the mobile view in the page editor.

Current behaviour

The image is overlapping in the mobile view in the page editor.

Steps to reproduce

1. Create a test page.
2. Add the Discount banner with image pattern to it.
3. Switch the preview to Mobile.
4. See that the image is overlapping in the page editor.

Note
This problem only appears in the page editor, not in the frontend. And it only appears in the mobile preview. In the tablet and desktop perview, the image does not overlap.

Proposed solution

I propose adjusting the image so that it no longer overlaps in the mobile preview in the page editor.

Screenshot

cc: @albarin (internal thread: p1688568877785369/1688565263.597279-slack-C02UBB1EPEF)