Gap after gallery sections

Site URL: https://rhurtado-new.squarespace.com/

Hi everyone! I'm trying to build an image gallery and wanted to display more than 6 images in a row, both on desktop and on mobile.

I used this code as a header injection on the page and it worked great:

Quote

<style>
@media(min-width: 100px) {
  .gallery-grid-wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important;
    height: 100% !important;
  }
}
</style>

The only issue is that I have the galleries organized in an accordion (Will Myer's Accordion Pro plugin) and when I expand the accordion sections, there's a big space under each gallery section. This only happens in the beginning, if I close and open the accordion sections, the gap disappears. If I remove the code above, there is no gap when expanding the accordion sections. 

I'd love any thoughts on how to fix this, thank you!

Can you take a screenshot of gap? It looks fine to me

https://rhurtado-new.squarespace.com/

5 hours ago, tuanphan said:

Can you take a screenshot of gap? It looks fine to me

https://rhurtado-new.squarespace.com/

Hi tuanphan, here's a video showing the issue. Thanks for looking!

On 7/31/2022 at 2:55 PM, ramonhurtado said:

Hi tuanphan, here's a video showing the issue. Thanks for looking!

Try adding to Design > Custom CSS

/* gap mobile */
@media screen and (max-width:767px) {
.open .accordion-content {
    height: auto !important;
}
}