Slideshow banners not resizing to mobile on Brooklyn Theme

[GYGYB]

Hi

Can anyone please tell me why my slideshow banners are not resizing to mobile on my Brooklyn theme?

The url for my website is https://mummy-gummies.com/

Thank you in advance for any help!

Claire :))

[paramSoft]

Please place this code at the end of theme.scss
Please make the 'm' of media small.

@_media only screen and (max-width: 600px) {
  #Slideshow-slideshow {
    background-color: #ffffff;
}
.slideshow__image {
    object-fit: contain;
    -o-object-fit: contain;
}
}

[GYGYB]

Thank you for that, I have inserted the code however I have a huge blank space at the top and below the banner.  Is there anyway to get rid of these gaps?

Thank you

Claire :))

[paramSoft · Accepted solution]

Please add this code  also.
Please make the 'm' of media small.

@_media only screen and (max-width: 749px) {
.slideshow--adapt .slideshow {
    min-height: 42vw;
}
}

[GYGYB]

 That is much better!

Thanks so much for your help!

Claire

[paramSoft]

Thank you for update.