/**
 * Photo Gallery Paragraph Styles
 *
 * Fixes mobile overflow caused by:
 * 1. Bootstrap .row (display:flex) overriding the CSS grid on .photo-gallery-grid
 * 2. .photo-gallery-img-thumb having max-width:none !important allowing overflow
 * 3. .square (<a> element) not filling its grid cell
 */

/* Force grid display regardless of Bootstrap .row on same element */
.photo-gallery-grid {
  display: grid !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Prevent grid cell blowout — min-width:0 is required for grid children */
.photo-gallery-grid .gallery-item {
  min-width: 0;
  width: auto !important;
  flex: none !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

/* Make .square <a> fill its grid cell */
.photo-gallery-grid .square {
  width: 100%;
  display: block;
}

/* Constrain image to its cell — override max-width:none from styles.css */
.photo-gallery-grid .photo-gallery-img-thumb {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  display: block;
}