Shop Page - Product Description Help!

Hello! Looking for guidance on our Shop Page. We've fully customized the grid images on the initial Shop Page, but I"m struggling to find the proper code for the individual product description pages. 

1. Most importantly, our mobile images on our individual product description pages are not showing correctly (attached image). They're cut off on the top and bottom. 

2. Secondly, I would like to change the font family of that header to the one on the rest of our site. We've successfully changed the font on the Shop Page, but not the individual product description pages. 

Any help with this coding would be greatly appreciated! 

hellomediasocial.com/shop 

Add to Design > Custom CSS

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}
h1.ProductItem-details-title {
    font-family: 'hk grotesk' !important;
}