How to make header images responsive

Hello,

Summary of post:
I would like to make it so my header images:

1. Do not have any white space between them or between the bottom of the images and the toolbar below.
2. Automatically resize based on the screen size and zoom to maintain their proportions (so that the images all adjust equally if someone zooms in or out of the page).

I have the header set up as four columns with no space in between, with an image of equal dimensions filling each column.

–Detailed post below–

I am trying to make the header images at the top of my homepage responsive, so that they adjust with the screen size and zoom to have the same proportions regardless of zoom and monitor size. At 100% zoom, there should not be any white space between the bottom of the images and the black toolbar below. However, if I zoom into the page to 110%, the images do not adjust proportionally, and a white space emerges between the bottom of the images and the toolbar, despite the fact that there is space for the images to adjust.

Likewise, on a large screen, a gap emerges between the images, despite the fact that I have the distance between the image columns set to 0.

The way I built this was by making four columns in Elementor, and adding an image of equal dimensions to each of the columns. Is there any way for me to make the images responsive so that they resize automatically based on screen size and zoom?

The page I need help with: [log in to see the link]