Custom CSS gives two different results on galleries.

I have these two galleries:

https://www.jtpettersen.com/home/cliffdivers

https://www.jtpettersen.com/home/cosplayportraits

And I have this custom CSS code to disable masonry gallery in mobile view (Since I want full width on the photos on mobile view):
 

/* Disable masonry grid in mobile */
@media (max-width: 576px) {
  .gallery-masonry-wrapper {
    display: block !important;
    height: auto !important;
  }
  
 .gallery-masonry-item {
    width: auto !important;
    position: static !important;
    transform: none !important;
    margin-top: 1rem;
    
  }
  
  .gallery-masonry-item-wrapper {
    height: auto !important;
  }
 
 .gallery-masonry-lightbox-link {
 pointer-events: none; 
  /*disable click to prevent popup*/ 
touch-action: none;
   /*disable tap to prevent popup*/
  }
  }

My issue is this:

On Desktop they both look good. But on mobile, only the Cliff Diver gallery looks correct. The Cosplay gallery seems to retain the two colum layout even on mobile. But only on one side, makin the page look weird and the photos tiny. It even happens if I duplicate the Cliff Diver page and replace the photos with the Cosplay ones. I am kinda stumped as to why I get to different results with the same layout. 

In short: Why does mobile view of these to pages look different? When from what I can see, they are setup identical in Squarespace.

Can anyone point me in the right direction?

Thomas

Worked great! Thanks!