.masonry {
  column-count: 4; /* 4 columns on desktop */
  column-gap: 20px; /* space between columns */
  padding: 20px;
}

.masonry img {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 12px; /* smooth rounded corners */
  display: block;
  break-inside: avoid; /* prevent image breaking */
}

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

/* Mobile - 1 column */
@media (max-width: 600px) {
  .masonry {
    column-count: 1;
  }
}