One Gallery Column on Mobile

To make Gallery to One Column on Mobile, you can use these CSS code to Custom CSS.
#1. Gallery Grid

@media screen and (max-width:767px) {
  .gallery-grid-wrapper {
      grid-template-columns: repeat(1,1fr) !important;
  }
}

#2. Specific Gallery Grid
First, you need to find Gallery Grid ID. Use below tool

In my example, it is: section[data-section-id="660fb69c5ad8264c5dbae2e7"]

Next, use CSS code like this

@media screen and (max-width:767px) {
 section[data-section-id="660fb69c5ad8264c5dbae2e7"] .gallery-grid-wrapper {
      grid-template-columns: repeat(1,1fr) !important;
  }
}

#3. Gallery Masonry
Use this code to Custom CSS box

@media screen and (max-width:767px) {
.gallery-masonry-item-wrapper {
height: auto !important;
margin-bottom: 30px !important;
}
figure.gallery-masonry-item {
position: relative !important;
width: 100% !important;
transform: unset !important;
}
.gallery-masonry-item-wrapper {
height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
width: 100% !important;
}
.gallery-masonry {
padding-left: 10 !important;
padding-right: 10 !important;
}
/* new code */
.gallery-masonry-wrapper.gallery-masonry-list--ready {
height: auto !important;
}}

#4. Specific Masonry
Similar #2, Find Masonry ID, then use CSS code like this

@media screen and (max-width:767px) {
section[data-section-id="66d3a3595ba3532519b4e0f6"] {
.gallery-masonry-item-wrapper {
height: auto !important;
margin-bottom: 30px !important;
}
figure.gallery-masonry-item {
position: relative !important;
width: 100% !important;
transform: unset !important;
}
.gallery-masonry-item-wrapper {
height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
width: 100% !important;
}
.gallery-masonry {
padding-left: 10 !important;
padding-right: 10 !important;
}
.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}}}