Text not resizing when window is reduced

Site URL: https://antelope-blueberry-cdps.squarespace.com/

Viewing password: Socrates

I've spent a while putting our new site together, and on my desktop at home it looks great.

However, on my work monitor - which is smaller - the h1 and h2 texts are sometimes too big and they overflow mid-word. It's really ugly.

Is there a way for the site to reduce the size of the fonts as the window size reduces?

Picture 1 shows how the text should appear; picture 2 shows how it overflows in the middle of the word; same for picture 3.

You try this to Website Tools > Custom CSS

h1, h2 {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    display: inline-block;
}