Making grid strips into even columns/rows on mobile

I have 12 images, and on the desktop version of my website I was able to fit all 12 into one row in my grid strip gallery. On mobile, I would like this to turn into 2 rows of 6 images each, but the default makes the columns uneven 😞 instead i get a row of 8 images and then a second row of 4 images. the height of the second row is also larger and looks really bad.

The first photo 

and this second photo.

how can i make it so that there are 2 rows of the same amount of photos? 

link to the page incase it helps! https://www.maariyahmustafa.com/portfolio/project-one-ephnc-gyp4e

You can add this code to Website Tools (under Not Linked) > Custom CSS

@media (max-width: 576px) {
[data-section-id="65986ac9470ee664a573a80a"] {
    .gallery-strips .gallery-strips-wrapper {
        columns: 12;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0 5px;
    }
    .gallery-strips-item-wrapper {
        height: auto!important;
    }
    .gallery-strips-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 5px!important;
        box-sizing: border-box;
    }

    .gallery-strips .gallery-strips-item img {
        height: 100%!important;
      	width: 100%!important;
    }
}}