How to do a @mediaquery to resize images for mobile?

Site URL: https://shabbaskitchen.com/pantry-staples

Hello - So after searching through how to inject custom CSS into web pages, I have ran into an problem I need some help solving. I also added a screenshot below detailing the issue and includes the collection and block #s.

Below I have a CSS media query code that does work for this website page, changing the p font color to red for mobile (<641px devices). So I have the foundation that I believe the final solution will fit into.

#collection-5fb81f0d2aa5ca06b9d36e10 {   
  /*only applies to the "pantry-staples" page on this site using this collection # */
  @media screen and (max-device-width: 641px) {
 p {
    color:red;
  } 
}
}

However, if you open the page on mobile you will see that the images are MASSIVE and I would like to scale them down in this same media query. I can't seem to find out how to apply CSS to just the image <div> or container that the images are in? Maybe I can just use the css "class" that contains the image section? That didn't seem to work for me in my attempts.

In short - I would like for the image section of this page https://shabbaskitchen.com/pantry-staples to resize for mobile to be more viewable and proportionate. I could not find a way to apply CSS to that section in my first attempts. 

Any help welcome. Thanks!!

Add to Home > Design > Custom CSS

/* resize mobile images */
@media screen and (max-width:767px) {
div#page-section-5fb82030c3e9d171eb16df7b img {
    width: 50%;
    margin: 0 auto !important;
    display: block;
}
}