2nd Image Hover on mobile site too small!

Site URL: https://dogfish-clarinet-npzm.squarespace.com

I have copied a CSS to create some images that when you hover over change to another image.  They look great in the site however when you see them on the mobile site version they are coming up tiny!  They obviously can't 'hover' because its phone or iPad which is fine.  Another issue is that if someone clicks on them they are sent to a page with just that image, is there a way of disabling the click so it ignores it and doesn't go anywhere?

The website is password protected but happy to give it out if needed!!

Thanks in advance for any help!

Please send password to check

Where is the page with the hover image?

@media only screen and (max-width: 640px) {
   section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 {
    width: 33.333% !important;
    float: left !important;
  }
  section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 .sqs-block-content a > div[id*=img-hover] {
    height: 20vw !important;
    width: 20vw !important;
  }
}

11 minutes ago, bangank36 said:

@media only screen and (max-width: 640px) {
   section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 {
    width: 33.333% !important;
    float: left !important;
  }
  section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 .sqs-block-content a > div[id*=img-hover] {
    height: 20vw !important;
    width: 20vw !important;
  }
}

 

Yes this is it!!

Please copy the custom code to custom css

1 minute ago, bangank36 said:

Please copy the custom code to custom css

OMG this is absolutely PERFECT!!!!!  Can't thank you enough, this looks brilliant... wasn't sure about posting on here but what an awesome and quick response!!

Any chance you can help with the whole 'clicking on' issue whilst you are here lol?!?!