mopep

@tuanphan almost but not quite...trying to keep 3 columns...is it possible? With this, it turns it into 2 columns. 

Thank you!!!!

Site URL: https://chartreuse-lime-7f5x.squarespace.com/config/

The "The Music" page

I am trying to keep 3 and then 2 columns on mobile version of this page on website: 

https://chartreuse-lime-7f5x.squarespace.com/config/

Any ideas?? I tried to make it all one block and divide the one text block but then of course the text won't stay aligned in columns/match up....

To clarify: Looking to keep the hover on one page which is using a simple grid format...but not on other pages which use masonry grid. 

Site is: chartreuse-lime-7f5x.squarespace.com

Password: Votretoast1963

Hi! I have added hover to gallery...but I am trying to include captions on a different page which are not hovered/centered and obviously cannot do so. Is there a way to override the hover function for one page and/or to apply this hover function to ONLY one page? 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-grid-image-link:after {
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;}
.gallery-section .gallery-caption p {
  text-align: center;
  font-size: 50px;
  font-weight: 500;
  color: #00394;
  text-transform: normal;
  line-height: 1.5em;
  font-family: inherit;
}.gallery-section .gallery-caption {
  background: rgba(104, 8, 37, .5);
  padding: 20px 0px;
}