Portfolio page - 3 images/image links in a row on mobile

I'm building a site with a portfolio section. On desktop, I have four images per row, but on mobile view it automatically switches to a "feed" with one image at a time/stacked on top of each other. I'm trying to adjust the CSS so that I can have at least three images per row even on mobile.

Through the forum I found the following code, which works for 2 images per row. I'm now trying to adjust it to show three images per row instead. However, If I simply change the number "repeat(3,1fr);" it works, but the images differs in size (see screenshot)

/* portfolio mobile */

@media screen and (max-width:767px) {

div#gridThumbs {

grid-template-columns: repeat(2,1fr);

}}

Any ideas?
 

URL: https://caterpillar-parrotfish-m9mk.squarespace.com/all-work
Password for site is AFLA


 

You can use this CSS code

@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(3,1fr) !important;
    grid-gap: 10px 10px !important;
}
}