/* Masonry via CSS columns */
.masonry-gallery {
  column-count: 3;
  column-gap: 0.8rem;
}

.masonry-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid; /* Safari/WebKit */
  margin-bottom: 0.8rem;
}

.masonry-item a { display: block; }
.masonry-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Tablet */
@media (max-width: 900px) {
  .masonry-gallery { column-count: 2; }
}

/* Phone */
@media (max-width: 560px) {
  .masonry-gallery { column-count: 1; }
}

/* No changes needed to your existing masonry CSS.
   Optional: a class we add to last-row items so we can clip their image height. */
.masonry-item.crop-last {
  overflow: hidden;
}
.masonry-item.crop-last img {
  width: 100%;
  display: block;
  object-fit: cover; /* enables clean cropping when we set a fixed height */
}