/*
  This stylesheet is designed to be highly specific to ensure the gallery
  content is centered, overriding any conflicting styles from other files.
*/

/* Center the entire content area */
.gallery-container {
  margin: 0 auto !important; /* Force center the main container */
}

/* Center all text and inline/inline-block children */
.gallery-container,
.gallery-section,
.gallery-grid-wrapper {
  text-align: center !important;
}

/* Make the grid a single inline-block item so it can be centered by the parent's text-align */
.gallery-grid {
  display: inline-grid !important;

  /* Resetting potential conflicting rules */
  justify-content: center !important;
  justify-items: center !important;

  /* Keep your existing gap and column definitions 
  gap: 20px; */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  .gallery-grid {
    /* For mobile, switch to a single column and reset alignment */
    display: grid !important;
    grid-template-columns: 1fr !important;
    /*gap: 30px !important; */
    text-align: left !important;
    margin: 0 auto !important;
  }
}