Display images full width in mobile view

Site URL: https://disc-snail-sk6j.squarespace.com

Site:

https://disc-snail-sk6j.squarespace.com

Password:

Fevroniapass

Page:

https://disc-snail-sk6j.squarespace.com/shop/p/crystal

Hi,

I'm still having issues with how my images appear when viewing the site in mobile.

Desktop: shows my first image of four icons exactly how I intend.

Mobile: Crops heavily into the first image so only two icons are visible.

Question: Can I use any CSS to make a site wide change so that mobile view displays my images full width?

Update. I managed to solve the problem by using this text from another forum post:

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
}
img.ProductItem-gallery-slides-item-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.ProductItem-gallery-slides:before {
    padding-bottom: 1% !important;
}
.ProductItem-gallery-current-slide-indicator.enable-on-first-image-load.enabled {
    display: none;
}