* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: radial-gradient(circle at center, #1a1a1a 0%, # 100%);
  font-family: sans-serif;
  overflow-x: hidden;
}

/* =========================
   DYNAMIC MASONRY
========================= */

.gallery {
  column-count: 3;
  column-gap: 16px;
  padding: 10px;
  
}

@media (max-width: 1200px) {
  .gallery { column-count: 3; }
}

@media (max-width: 700px) {
  .gallery { column-count: 1; }
}

.gallery__item {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transform: translateY(40px);
  opacity: 1 !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
}

.gallery__item.visible {
  transform: translateY(0);
  opacity: 1;
}

/* =========================
   IMAGE STYLE
========================= */

.gallery__item img {
  width: 100%;
  display: block;
  border-radius: 20px;
  filter: grayscale(90%);
  transition: 
    transform 0.7s ease,
    filter 0.7s ease;
}

/* Hover depth effect */
.gallery__item:hover img {
  filter: grayscale(80%) blur(3px);
  transform: scale(1.06);
  -webkit-tap-highlight-color: transparent;
}