Responsiveness of hero slideshow section with image and button.

[luis-zadel]

Hello

My CSS is not the best and I'm struggling with the responsiveness of the design we have crafted for our site, specifically on the hero slideshow section which has a button.

We have a cool looking image for it with a fancy text but can't manage to get the button placed right for different screen sizes or if the user zooms in or out in the browser. I've tried css calc with a custom property for screen size but don't have the knowledge to make it work, or to decide if it would be the best approach.

I'm trying also using the theme's section customization to generate the text but don't love the way it's displayed and can't get the close enough look for our likes either with font-weight or other CSS properties I've tried. Have't managed to get the spacing between the elements right either.

Here are the screenshots of the section generated and the image with the text that we like but with the floating-around button.

and

I'll appreciate some ideas which approach would be best to use and how to make it work.

I'm linking a preview of the site as it is a work in progress, not to mess with our current published theme: https://wyqjg1z8hoee2m0j-62414225581.shopifypreview.com

Thanks in advance