Overlapping text on text blocks when responsive scaling decreases for smaller screens

Site URL: https://butterfly-clover-xpmk.squarespace.com/

I'm having trouble trying to figure out how to prevent the text from overlapping when the site scales down for smaller screen devices. First 

I wanted the 'Membership and passes' text to wrap within the confines of the column, like it does in editor view (see image below). For some reason it doesn't do this in production!

Help is much appreciated:

Hi,

What is access password?

Hi Tuanphan - I've published the page and you can see it at '/home'. thank you.

On 10/4/2021 at 10:55 AM, LingL said:

Hi Tuanphan - I've published the page and you can see it at '/home'. thank you.

Add to Design > Custom CSS. The code run from 768px to 1024px. You can adjust these numbers

/* Home text break */
@media screen and (max-width:1024px) and (min-width:768px) {
div#block-ac2983fffb585b3224a3 h1 {
    font-size: 40px;
}
}

Thanks @tuanphan - this is a really helpful alternative. 

If there a way to allow the text to roll on the next line like in the preview version screen I attached?