Code for mobile - reduce text size

Site URL: https://sunflower-accordion-z2d3.squarespace.com/

My site is 7.0 - https://sunflower-accordion-z2d3.squarespace.com/

I have the below css targeting the card elements on the homepage:

// HOMEPAGE //
#introduction {.image-title p {
  color: white !important;
  font-size: 50px !important;}
}

// IMAGE CARD ON LIGHT BANNER //
#professional-link {.image-title p {color: black !important;
  font-size: 50px !important;}
.image-subtitle p, .image-subtitle p a {color: black !important;}
}
 

This forces the titles "HOMEOWNER" and "PROFESSIONAL" to be larger on the homepage. 

However, on mobile these titles are breaking onto two lines so I need to make them smaller for mobile and I can't seem to target them correctly...

Thanks in advance!

Thank you @iamdavehart!