Solved Responsive header image grid

Hi there! I am battling to set up a responsive grid for my header images. My url is http://www.eppeidev.kdesignhouse.co.za/wp/ In the first example the widths/heights shift when the window size does - it doesn't stay lined up. In the last example I am unable to get the images to fill the entire width of the page.

The effect I'm looking for is to recreate the header of https://www.pmi.com/ - did't think this would be so difficult to set up.

 

Thank you for your response. I tried using a text module instead for the 2 blocks on the right but the main one needs to be a slider. Unfortunately there are still vertical alignment issues when viewed on a screen smaller than a desktop

 

Thank you - I have changed it to Cover. Unfortunately the images still aren't lining up vertically on ANY size screen... I have added the following code but still am having no luck

2 text modules -> Advanced tab -> Custom CSS -> Main Element:
height: 50%;

Then adding the following Custom CSS (to theme options):
.et_pb_image .et_pb_image_wrap,
.et_pb_image .et_pb_image_wrap img,
.et_pb_slider .et_pb_slide {
height 100% !important;
}

 

http://www.eppeidev.kdesignhouse.co.za/wp/
On the second grid I've removed the text and the 50% code... still no luck with getting the vertical alignment sorted

 

I've been fiddling around and am SO, SO close! The first/top grid and the one below are the exact same (duplicated)... but something is causing the images to be slightly misaligned on the first grid. (It's not the top padding - removed this and it made no difference.) Any ideas?

 

Finally got this working! Thank you SO MUCH for your help.