/* Exact 15px gutters; three across on desktop; stack on mobile */
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;     /* centers the rows */
  margin: -7.5px;              /* balance the per-cell margins */
}

/* Each photo "tile" is a fixed 325x325 square on desktop */
.photo-cell {
  box-sizing: border-box;
  width: 325px;
  height: 325px;
  margin: 7.5px;               /* 7.5px left + 7.5px right = 15px between tiles */
}

/* The square box that clips the image */
.photo-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f2f2f2;         /* optional neutral backdrop */
}

/* Cover the square without object-fit */
.photo-box img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  min-width: 100%;
  min-height: 100%;
}

/* ===== Mobile: stack with consistent 15px spacing ===== */
@media (max-width: 640px) {
  .photo-grid {
    margin: 0;                 /* reset container compensation */
  }
  .photo-cell {
    width: 100%;
    height: auto;              /* let the box control height */
    margin: 0 0 15px 0;        /* 15px vertical spacing between items */
  }
  .photo-cell:last-child {
    margin-bottom: 0;          /* no extra space after last item */
  }

  /* Make each item a full-width responsive square */
  .photo-box {
    width: 100%;
    height: 0;
    padding-top: 100%;         /* 1:1 square without aspect-ratio */
  }
  .photo-box img {
    /* same absolute centering "cover" trick */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
  }
}