Make product image carousel crop from centre as it scales down

I'm trying to make the product carousel crop from the center once the page is below 1360px wide. I have it pretty much working, but can only get it so the images are cropped from the right edge inward.

Code is presently set as:

/*Product Gallery Responsive Fit Adjustment*/

 @media screen and (min-width:1360px) {.ProductItem-gallery-slides img {
    height: auto !important;
    width: 50vw !important;
    overflow-x: hidden !important;
  }
.ProductItem-gallery div {
    height: auto !important;
   }}

 @media screen and (max-width:1359px) and (min-width:767px) {
.ProductItem-gallery-slides img {
    min-height: 480px !important;
    width: auto !important;
    overflow-y: hidden !important;
  }
   .ProductItem-gallery div {
    min-height: 480px !important;
    width: 50vw !important;
   }
.ProductItem-summary {
  min-height: 480px !important;
   } 
   .product-item-gallery-carousel-control {
     margin-top: 225px !important;     
   }}

Thanks in advance for any help offered.

@rocketbase can you share a link to the page you need help with so we can see the code in action?

@SaranyaDesigns Sorry, yes. URL is https://www.westgateone.co.uk/rent-studios/p/premium-studio-a

Thanks @SaranyaDesigns. That works great. Much appreciated.