Cobalt Theme Responsive Text

I’m building a new website using the Cobalt theme and am having some issues with the mobile responsiveness. The h1 page headers (as well as other headings) do not resize in mobile views. I need the h1 headers to resize automatically as I’m using them as page titles with a background hero image.

I’ve tried adding the code below under Customizing ▸ Advanced ▸ Custom JS & CSS, but it didn’t work.

Can someone tell me what code I need to make all h1 headings (or ideally all text on the website) fully responsive.

h1 {
font-size: 1vw;
}

and

h1 {
font-size: clamp(100%, 1rem + 2vw, 16px);
}