Getting mobile product images to show without being cropped

Site URL: https://www.knoceanstudio.com/shop/p/set-of-2-candle-sticks

My product images aren't displaying correctly on the mobile version of the site. They either get cut off or aren't centered. Anyone know a fix to this problem?

Thanks!

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
    height: auto !important;
    width: 100% !important;
    transform: unset !important;
}
}