I'm trying to create an image gallery using a flexbox layout. This is how it's supposed to look in the end:

This is basically just a flexbox with images inside:

<div class="flexbox-grid">
    <img src="https://i.imgur.com/DjLPhu1.png">
    ...
 </div>

.flexbox-grid {
   display: flex;
   flex-wrap: wrap;
}
  
img {
   margin: 10px;
}

But now I want to add sections to groups of images for some js scripts. Like this:

<section id="first">
    <img src="https://i.imgur.com/DjLPhu1.png">
</section>
<section id="second">
    <img src="https://i.imgur.com/DjLPhu1.png">
    <img src="https://i.imgur.com/DjLPhu1.png">
    <img src="https://i.imgur.com/DjLPhu1.png">
</section>

Of course this completely messes up the grid layout, as now the grouped images are kept together:

How do I add sections (or divs) here and still keep the initial grid layout? The elements I actually want to have a flexbox for are the children of the sections, not the sections themselves.

Here's the code: https://jsfiddle.net/8f2mv7cb/1/

Thank you in advance.