How to create a specific image gallery using css (see details)

Question

Here is a sample image of the layout I am trying to achieve with HTML and CSS:

From what the gallery looks like,

• the images are placed in a row
• each row fills the width of the container
• each image fills the height of the row

The height of each row looks to be slightly different (e.g. min-height: 300px; max-height: 600px;) to accomadate for the different aspect ratios of the image.

I'm trying to build this layout with html and css flexbox, but haven't really gotten too far with it:

.gallery-container {
    display: block;
    margin: 0 auto;
    width: 50%;
}
.gallery-row {
    display: flex;
    min-height: 300px;
    max-height: 500px;
}
.gallery-img {
    position: relative;
    flex-grow: 1;
    max-width: 33.3%;
}
.gallery-img img {
    height: 100%;
}

<div class="gallery-container">

    <div class="gallery-row">
        <div class="gallery-img">
            <img src="https://picsum.photos/200/300"/>
        </div>
        <div class="gallery-img">
            <img src="https://picsum.photos/300/200"/>
        </div>
        <div class="gallery-img">
            <img src="https://picsum.photos/400/200"/>
        </div>
    </div>
    
    <div class="gallery-row">
        <div class="gallery-img">
            <img src="https://picsum.photos/400/300"/>
        </div>
        <div class="gallery-img">
            <img src="https://picsum.photos/100/200"/>
        </div>
        <div class="gallery-img">
            <img src="https://picsum.photos/300/200"/>
        </div>
    </div>

</div>