Different Header Sizes for different device sizes?

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/

I was wondering if it is possible to have my header sizes (H1, H2, H3, H4) that are set on desktop to appear smaller on mobile device?

For example, currently I have my H1 set to 4.9rem on desktop, nice and big/bold so it suits my brand.

But on mobile device this is a little too big! I want to be able to reduce the headers (H1, H2, H3, H4) that appear on mobile if possible?

Please help!

Best,

Faiz 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
h1 {
	font-size: 1rem;
}
h2 {
	font-size: 2rem;
}
h3 {
	font-size: 3rem;
}
}

Oh wow! Very impressive that's awesome!!! Clever!!

Thank you sooooooooooooo much that's superb!!!

Is there any specific rule to how the hierarchy of size should be?

E.G. If H1 = 4.9, what should be the correct sizes for H2, H3, H4...?

Or is it more about what looks better?

You can adjust any number what you feel okay ✌️

Thank Tuanphan, I really appreciate your input today!!!