How to make an image grid responsive in a slider

Hi there!
I would like to make a grid of 3 images responsive to my page resizing. The grid margins need to always stay the same and the 2 images on the right need to be the same height as the left one (So a rectangle composition). I used background images in div blocks with a % top padding to keep the good aspect ratio.

You will see in my project:
Slide 1: I want my grid to resize like this.
Slide 2: The grid in question that is getting masked at the bottom and not resized properly.

Thank you!

Here is my site Read-Only: https://preview.webflow.com/preview/mainstudio-199e02-b7a54f8e884f278464f00?utm_medium=preview_link&utm_source=dashboard&utm_content=mainstudio-199e02-b7a54f8e884f278464f00&preview=086dcf0c750a2dbe8ba3f49e82029f3a&workflow=preview