I'd recommend not doing that as it makes the UX on mobile worse and has a bad influence on SEO. Instead, I usually do something like that:

    h1::first-line {font-size:2rem;}
    h1 {font-size:1.5rem;}

It will show the first line of a heading in a larger and all further lines in a smaller font size. Additionally, you could hyphenate headings.

edit: And fluid typography might be something to look into. Currently, you seem to have a single breakpoint where font size is adapted. That does not work well on larger phones.