Transparent background causing issues with hero banner and image banner on mobile view

[Glaciers]

I found the CSS to use to make the box on top of the hero image on the Refresh theme transparent, it looks fine on desktop but on mobile, you can't see the hero text and the button takes up the entire div. I'm having the same issue on another container further down on the homepage where I added CSS to make the text and button container transparent + smaller in width, it causes the same issues on mobile view. How can I correct this?

this is the CSS I used for the hero and banner which look correct on desktop but is causing the text to disappear and the button to stretch on mobile view.

.slideshow__text.banner__box {
background-color: rgba(255, 255, 255, 0) /* Change last value to adjust the opacity */
}
.banner__box {
background-color: rgba(255, 255, 255, 0);
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
width: 80%;
max-width: 600px;
}

https://a7ec6e-bd.myshopify.com/?_ab=0&_fd=0&_sc=1

[Glaciers]

this is the CSS I used for the hero and banner which look correct on desktop but is causing the text to disappear and the button to stretch on mobile view.

.slideshow__text.banner__box {
background-color: rgba(255, 255, 255, 0) /* Change last value to adjust the opacity */
}
.banner__box {
background-color: rgba(255, 255, 255, 0);
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
width: 80%;
max-width: 600px;
}