I would like to change font size on mobile display for a specific picture, I am trying to add css but I can't figure it out

Hi,I am trying to style my website so it will look good on my phone.I managed to enter CSS to change font size for my H1 and H3

But there are 6 pictures with text that I can't figure out how to changeits the 5 pictures in this page:https://raspberry-hibiscus-59n4.squarespace.com/?p

I want to make the fonts smaller.

And in this page:https://raspberry-hibiscus-59n4.squarespace.com/adult?p

There is a picture in the middle of the page (where it says deepening method), on my computer it looks great but the picture on my phone looks small and the font on it looks small too.

Thank you in advance for your help. :)

@amardeepatherapy Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
/* Deep method */
div#page-5d0d26b23ca46a0001aa66a6 p {
   font-size: 30px;
}
/* My Core Value Text */
div#page-5d0148db3244670001d5c0aa p {
   font-size: 20px;
}
/* My core value images */
div#page-5d0148db3244670001d5c0aa img {
   max-width: 50%;
   margin: 0 auto;
}
}

Thank you for your help.The pictures did change their font size and now it looks great on the "about me" page.On the "deppening method" page:Instead of enlarging the font only on the picture it self it enlarged the fonts on all the page.

Also, Do you maybe know how I can make the deeping picture taller and wider when its on phone display?

Thank you again for your help :)