Need Equal Sized, Full-Bleed Image Blocks (Hover Overlay Effect Already Applied)

The third section on the page is a "portfolio preview" of sorts, but when responsive, the left and right images squish and the middle two do not. 

Is there a way to get these to all resize equally? They are images w/ a color block overlay and hover effect applied in custom css. 

https://endive-corn-larn.squarespace.com
pass: motifhomes

Uploaded screenshot of section I'm referring to! 

Hi @katiemakesdesign website looks really nice! Took me a minute to figure out that the problem is that the images are taking up a different number of grid columns, from left to right, 2, 9, 9, 4. The edge ones look wider on desktop because they are stretched to the edge across the margin, but this margin is very variable from potentially very wide on desktop to non-existent when the VW gets smaller than the content main width. That is why the edge two images shrink and grow. Now for the solution; my prefered way to deal with this is to make that particular section "full width" so the grid extends from edge to edge so that the grid is even and the images can take up 6, 6, 6, 6 columns. Add this to your Custom CSS:

section[data-section-id="6352ed6854d6e135b4acd83b"] {
  .fluid-engine {
    --sqs-site-max-width:100vw;
    --sqs-site-gutter:0vw;
  }
}

Let me know if you're happy with that solution!

On 11/22/2022 at 4:05 AM, Ziggy said:

Hi @katiemakesdesign website looks really nice! Took me a minute to figure out that the problem is that the images are taking up a different number of grid columns, from left to right, 2, 9, 9, 4. The edge ones look wider on desktop because they are stretched to the edge across the margin, but this margin is very variable from potentially very wide on desktop to non-existent when the VW gets smaller than the content main width. That is why the edge two images shrink and grow. Now for the solution; my prefered way to deal with this is to make that particular section "full width" so the grid extends from edge to edge so that the grid is even and the images can take up 6, 6, 6, 6 columns. Add this to your Custom CSS:

section[data-section-id="6352ed6854d6e135b4acd83b"] {
  .fluid-engine {
    --sqs-site-max-width:100vw;
    --sqs-site-gutter:0vw;
  }
}

Let me know if you're happy with that solution!

Hey @Ziggy !! Thanks so much for your response to this! I put that in the CSS and it's not seeming to work.. any suggestions?