Perch Gallery - Every 2 images add HTML

Hey, this may not be possible but I am sure you guys will be able to tell me. I am working on using the HTML5Up! template of Prologue (https://html5up.net/prologue) it has some HTML that looks like this:

<div class="row">
            <div class="4u 12u$(mobile)">
                <article class="item">
                    <a href="#" class="image fit"><img src="images/pic02.jpg" alt="" /></a>
                    <header>
                        <h3>Ipsum Feugiat</h3>
                    </header>
                </article>
                <article class="item">
                    <a href="#" class="image fit"><img src="images/pic03.jpg" alt="" /></a>
                    <header>
                        <h3>Rhoncus Semper</h3>
                    </header>
                </article>
            </div>
            <div class="4u 12u$(mobile)">
                <article class="item">
                    <a href="#" class="image fit"><img src="images/pic04.jpg" alt="" /></a>
                    <header>
                        <h3>Magna Nullam</h3>
                    </header>
                </article>
                <article class="item">
                    <a href="#" class="image fit"><img src="images/pic05.jpg" alt="" /></a>
                    <header>
                        <h3>Natoque Vitae</h3>
                    </header>
                </article>
            </div>
            <div class="4u$ 12u$(mobile)">
                <article class="item">
                    <a href="#" class="image fit"><img src="images/pic06.jpg" alt="" /></a>
                    <header>
                        <h3>Dolor Penatibus</h3>
                    </header>
                </article>
                <article class="item">
                    <a href="#" class="image fit"><img src="images/pic07.jpg" alt="" /></a>
                    <header>
                        <h3>Orci Convallis</h3>
                    </header>
                </article>
            </div>
        </div>

Now I want to try and recreate this with my gallery images. I have created a template file with the following HTML so far:

<perch:before>
    <h1>
        <perch:gallery id="albumTitle" type="text" label="Title" size="l" />
    </h1>
    <div class="row">
        <div class="4u 12u$(mobile)">
</perch:before>
            <article class="item">
                <a href="<perch:gallery id="main" />" class="image fit"><img src="<perch:gallery id="small" />" alt="<perch:gallery id="imageAlt">" /></a>
                <header>
                    <h3>Ipsum Feugiat</h3>
                </header>
            </article>
<perch:after>
        </div>
    </div>
</perch:after>

But what I could do with doing it for every 2nd image close the element for <div class="4u...."> and open a new one. Is there a way to do that or would I need to write some custom PHP code and not use the template file?