Landing Page / Flexbox and img's

I’m having two issues with using flexbox one is with managing images and the other is flex-direction: row;
defaults to the " column" argument in FireFox or when checked in Chromes inspector view.

The main issue I have with the images is that a child of the flex container will stretch in either width or height, resulting in unwanted white space or background and I’m also having issues with the img element responding to CSS arguments so would have to apply the width and height directly to the HTML elements, I was trying to keep all formatting within my style sheet.

I’m pulling image from wwwdotpablopicassodotorg. At first, I was doing so via URL but it felt as if I had a lack of control of the image sizing, so I stored some images locally and resized the images to around 400x500.

Another thing to add which I think is the reason for the phantom space, I’m using CSS cards along with flexbox and maybe these two do not play well?

CodePen for landing page:
codependotio/MrC0d3sAl0t/pen/mdJmvJq

The images are stored locally so they won’t show. I usually code locally then transfer and convert everything for codepen and then evaluate my code with the FCC evaluation tool.

Edit: I forgot to mention that I read up on CSS reset, and would like to know if this would help me with the issues I’m having?

Thanks!

Best,