font Alter font size in one section for mobile and desktop

Site URL: https://dove-gerbil-lksj.squarespace.com/

I would like to edit the font size for some H2 text on the home page. I've used this HTML code to edit the font size: 

<h2 style="font-size: 55px !important;text-align:center;">YOUR HOME FOR YOUTHFUL, RADIANT SKIN</h2>

Which looks great on desktop, however, on mobile, the text is far too large. I would like to be able to set a specific size for this text on mobile (without affecting the rest of the page/site). 

I tried adding this custom CSS which targets the font size for that particular section of the page using collection ID: 

@media screen and (max-width: 640px) 
{#collection-602a0859e785d50698eb3bb5  h2 {
font-size: 40px;}}

However, this doesn't affect the text that I need it to (it only works for H2 text using a text box). 

Does anyone know how to set a specific text size for desktop and mobile without affecting any other sections on the page/site? 

Hi,

Edit your h2 to this

<h2 class="h2text" style="font-size: 55px !important;text-align:center;">YOUR HOME FOR YOUTHFUL, RADIANT SKIN</h2>

Next, add this to Design > Custom CSS

@media screen and (max-width:767px) {
	h2.h2text {
	font-size: 30px !important;
}
}