RESIZE MOBILE TITLES AND MAKE 1 COLUMN ON MOBILE VIEW for Gallery Simple Grid!

Hello, 

I found this code to manipulate the titles on my GALLERY SIMPLE GRID mobile view as well as have the view create 1 column instead of two on mobile, however it doesn't seem to work.  PLEASE HELP!  

site:  https://bear-pufferfish-gsl3.squarespace.com/config/pages/website-tools/custom-css

Password- IRIS

CODE

@media (max-width: 640px) {
  .gallery-grid .gallery-caption-content {
    font-size: 14px !important;
  }
  .gallery-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

Thank you so much for your help! Natalee

Try changing to this code:

@media only screen and (max-width: 768px) {
  .gallery-grid .gallery-caption-content {
    font-size: 14px !important;
  }
  .gallery-grid .gallery-grid-wrapper {
    grid-template-columns: 1fr !important;
  }
}

Hey @Ziggy  When I used that code - it made it one column on both desktop and mobile. Anyway to achieve the following?

1- Any way to just have it one column on mobile only?  My client wants two columns on desktop. 

2- The opacity doesn't go all the way to the right with this code. Anyway to make that go 100%?

3- Anyway to manipulate the mobile version titles only?  If I want to make the font smaller?

Please see attached images.  THANK YOU FOR HELPING ME!!

Also @Ziggy I have a Lightbox Anything plug-in - would that be throwing it off?

That code snippet affects only up to 768px wide which is a tablet screen not desktop (unless you have a tiny desktop screen). I don't know how you have the overlay set.

@Ziggy  This is the code I have on this site:

}
    .header-nav-folder-item a:hover { background: #e9efe5}
/* Grid Gallery Captions on Hover */
.gallery-grid .gallery-caption
{
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5); // overlay color 
  height: 100%;
  padding: 0;
  opacity: 0;
   transition: all .1s ease;
  pointer-events: none;
}
.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center; // center caption box vertically 
  justify-content: center; // center caption box horizontally
}
.gallery-grid .gallery-caption-content {
  font-size: 18px !important; // caption font size
  font-weight: 200 ! important;// caption font weight
  color: white; //caption font color 
  padding: 2vw; // padding around the caption
  text-align: center; // center text within caption box
}
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item:hover .gallery-caption {opacity: 2;}
  

@Ziggy And this is the Lightbox Code Injection.

<!-- Plugin Lightbox -->
<link href="/s/plugin-lightbox.css" rel="stylesheet">
<script src="/s/plugin-lightbox.js"></script>
<script>pluginLightbox();</script>
<!-- end Plugin Lightbox -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){