Fallback image being stretch on mobile

Site URL: https://www.bristolharbourfestival.co.uk/

Hey 

I have a video playing on the desktop with an image being used as a mobile fallback. However the image for the fallback is being stretch and I can't fix. Anyone able to assist?

Thanks

Simon 

It looks like you solved with this CSS?

@media screen and (max-width: 600px) {
    #collection-5fd25ba5faf0e33e98cef9f1 section:first-child {
        min-height:65vh !important;
        height: 65vh !important;
        width: 10% !important;
        min-width: 100% !important
    }

    #collection-5fd25ba5faf0e33e98cef9f1 section:first-child img {
        width: 80% !important;
        height: auto !important;
        background-repeat: no-repeat !important;
        background-size: contain !important
    }
}

Unfortunately, that didn't completely solve it.

I could edit the vh area of the image  with this:

@media screen and (max-width:600px) {
#collection-5fd25ba5faf0e33e98cef9f1 section:first-child {
    min-height: 65vh !important;
    height: 65vh !important;
 	width: 10%!important;
  	min-width: 100%!important;
}

However none of those styles had a direct impact on the fall back image itself. That image still looks crushed on mobile 😞

I don' think this is doing anything.. 

  #collection-5fd25ba5faf0e33e98cef9f1 section:first-child img {
    width: auto!important;
    height: 100%!important;
    background-repeat: no-repeat!important;
    background-size: contain!important;
  }

@tuanphanwe've found how to target the image! It's working.  Thanks again for your help. 

.custom-fallback-image{
   object-fit: contain !important;
}