Product image cropped weird on mobile site

I'm trying to get the image to look good on both mobile and desktop views of my website. Here is the link: https://friendsofminnesotaorchestra.org/store/p/and-all-that-jazz

It looks good on desktop but it get cropped on the mobile version. What CSS should I use to disable cropping on this image? 

Also, how do I get rid of the spacing at the top/header?

TIA!

Bump so this doesn't get lost

Add to Design > Custom CSS

/* Mobile image crop */
@media screen and (max-width:767px) {
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}
}