Why do my images display differently in mobile?

Question

I am showing 3 rows of images. Here is the html:

   <div class="glass">
        <div class="image">
            <div>
                <img src="..." />
                <img src="..." />
                <img src="..." />
                <img src="..." />
            </div>
            <div>
                <img src="..." />
                <img src="..." />
                <img src="..." />
                <img src="..." />
            </div>
            <div>
                <img src="..." />
                <img src="..." />
                <img src="..." />
                <img src="..." />
            </div>
        </div>
    </div>

Here is my CSS:

.glass .image {
  margin-top: 75px;
}
.glass .image > div {
  display: flex;
}
.glass .image > div > img {
  border: 3px solid #4A4A4A;
  cursor: pointer;
  height: auto;
  margin: 5px 5px;
}

On a desktop view, they are all full width, and I have to scroll to the left to be able to see all the images.

On mobile, they are all forced into a single page view. You can see all the images without scrolling at all.

I don't know if this changes anything, but I do have this at the top of my html

<meta name="viewport" content="width=device-width, initial-scale=1">

What am I doing wrong? How do I make the images horizontally scrollable on mobile?