Adjust grid banner image height web vs mobile (August Theme)

Store Design
, ,
1

Hi,
Below our banner and product slider I have two grid banner sections on our start page (www.the-almond.com)

  1. first one has one image 100% width (our brand)
  2. Second one has three images 33.3% width (product categories)

I would like to have the height of the full width image be the same as the height of the section below with the 3 images.

We adjusted the image itself in order to achieve this on web, however on mobile the image obviously gets very small when turned into square.

Is there any way of using a full square image for web and mobile, but cropping the image on web so that it fills the screen as a rectangle with the same height of the images in the section below?

Thanks for the help!

2

Rather than adjusting the images, an idea might be to have two different images for web vs mobile. Could anyone help me with that?
I have found solutions for adjusting homepage banners with separate images but have not managed to recreate for sections further down. Thanks!