How can I edit this code to set one part of my code to be different on this website on mobile?

I've tried a few things but I'm not really sure what I'm doing in regards to the code.

So I'm using the twenty twenty one theme with the overlapping image feature to make the image in the right column slightly hang over the text in the left column, but I wanted the sign up form further under the image so extended the width to 120%. I love how it looks on desktop but on mobile it extends beyond the bound of the website and creates a horizontal scroll and I want it to not do that and to look just as good on mobile.

You can see here: http://thepositivity-co.stackstaging.com

I'm not sure the best way to edit the code so it fits and looks normal/good on mobile as well as having the overlap I like on desktop. I really would appreciate any help. Here's the code: https://www.codepile.net/pile/2QPOwGp6

(it was too many characters to put here)

Thank you!