How do I get the image to fit

HTML-CSS
1

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

2

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

(added display: flex to image-container)

3

Change the height and width from auto to 100%

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

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?

5

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