/* Global image size adjustments to make images display smaller and show 4 per row */
/* Images remain responsive but are visually smaller inside each gallery column */

img {
  max-width: 320px; /* default maximum display width for images */
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Gallery layout: 4 images per row on wide screens, smaller images centered in each column */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* exactly 4 columns on larger viewports */
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.gallery img {
  width: 80%; /* don't fill the whole column so images appear smaller */
  max-width: 240px !important; /* cap image display size */
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Medium screens: 2 columns */
@media (max-width: 1000px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery img { max-width: 300px !important; width: 85%; }
}

/* Small screens: 3 columns (shows three images per row on phones) */
@media (max-width: 520px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px;
  }
  /* cap images so they fit three across on narrow viewports */
  img, .gallery img { max-width: 140px !important; width: 90%; }
}