How do I get the image to fit

How do I get the image in the center of the page to fit the grid div fully?

like this?
https://codepen.io/hbar1st/pen/VGKaXj

(added display: flex to image-container)

Change the height and width from auto to 100%

.image {
  height: 100%;
  width: 100%;
}

I did the 100% on both, but now at ~500px give or take screen size, the image is very distorted. Would I make another media query or?

I would alter your grid so that there’s less text and more room for your image container.