body {
  background: #f8f3e7;
}

/* Masonry-style columns to eliminate row gaps for mixed aspect ratios */
.polaroid-grid {
  column-count: 1;
  column-gap: 1.5rem;
}

@media (min-width: 576px) { .polaroid-grid { column-count: 2; } }
@media (min-width: 768px) { .polaroid-grid { column-count: 3; } }
@media (min-width: 1200px) { .polaroid-grid { column-count: 4; } }

.polaroid {
  display: inline-block; /* required for multi-column masonry */
  width: 100%;
  margin: 0 0 1.5rem;
  background: #fff;
  padding: 12px 12px 28px 12px; /* thicker bottom for polaroid look */
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.15);
  transform: rotate(0deg);
  transition: transform 200ms ease, box-shadow 200ms ease, z-index 0s;
  break-inside: avoid; /* prevent splitting across columns */
}

.polaroid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.polaroid:nth-child(odd) { transform: rotate(3deg); }
.polaroid:nth-child(even) { transform: rotate(-3deg); }

.polaroid:hover {
  transform: rotate(0deg) scale(1.06);
  z-index: 2;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}