Responsive images in grid cropping at certain breakpoints

Hello,

I’m trying out Webflow after having used Squarespace for a couple of years. Overall, I’m quite the novice when it comes to responsive web design, so the issue I’m having is this:

On my main/home page, I have a grid set up with images. When resizing the width of my browser, the view of these images zooms in and ends up cropping out parts of the image I don’t want to be cropped. Below are some screenshots for reference:

How it should look:

How it crops when too wide:

How it crops when too narrow:

I don’t have this issue when I build the same layout in Squarespace. One thing I’ve noticed there is that the side margins increase/shrink in size when the window width is changed.

Is this an issue of being able to make the margins on my site responsive? Is it something that should be changed within the settings of the grid? Possibly another solution I haven’t considered?

I appreciate any help!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)