/*
  This stylesheet is designed to be highly specific and forceful
  to override any conflicting inline styles (element.style)
  that are causing the gallery images to stack incorrectly.
  It also includes updated spacing to tidy up the layout.
*/

/* General Centering and Layout Overrides */
.gallery-container {
  margin: 0 auto !important;
}

.gallery-section .gallery-grid-wrapper .gallery-grid {
  /* Force a grid layout that creates rows */
  display: grid !important;

  /* Explicitly define columns to ensure they don't stack */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;

  /* Centering the grid's content */
  justify-content: center !important;

  /* Setting a clean, consistent gap for desktop */
  gap: 10px !important;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  .gallery-section .gallery-grid-wrapper .gallery-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;

    /* On mobile, use a slightly larger gap for vertical spacing */
    gap: 20px !important;

    justify-content: center !important;
  }
}