Scale down font in one block for mobile

I realize this has been covered ad nauseam, but I can't seem to make the CSS code work for me. I need to scale down the font in a section of my page so it doesn't block the image on mobile. Basically, I want the font to be "Heading 3" size on desktop and "Heading 4" size on mobile. Images show what I hope to accomplish (and a screenshot of what I have in reality). Thanks in advance for any help with CSS. 

www.alaskanattorneys.com

This is what I want:

This is what I have:

@chuckEsleaze We can reduce the font size on mobile version with CSS. Would it be possible to share your site URL?

Just now, Lesum said:

@chuckEsleaze We can reduce the font size on mobile version with CSS. Would it be possible to share your site URL?

www.alaskanattorneys.com

I'm hoping someone can share the correct CSS code so I can learn from this. 

@chuckEsleaze Currently you've heading 4 for the text. You can first try changing it to heading 3. Then add the following code to reduce the font size only on mobile version:

section[data-section-id="64e906a90f4d42636ecc4d53"] h3 {
	font-size: 1.1rem !important;
}

Change the number 1.1rem in the code to whatever works best for your design. 

15 minutes ago, Lesum said:

@chuckEsleaze Currently you've heading 4 for the text. You can first try changing it to heading 3. Then add the following code to reduce the font size only on mobile version:

section[data-section-id="64e906a90f4d42636ecc4d53"] h3 {
	font-size: 1.1rem !important;
}

Change the number 1.1rem in the code to whatever works best for your design. 

Hmmm...I must be doing something wrong. I can adjust the font using that code, but it alters the image on my mobile version (zooms way in)

Just now, chuckEsleaze said:

Hmmm...I must be doing something wrong. I can adjust the font using that code, but it alters the image on my mobile version (zooms way in)

As it's supposed to. Font size over the image is supposed to impact the image below.