:root{ --gutter:24px; }            /* was 16px */



*{ box-sizing:border-box; }

body{
  font-family:system-ui,Arial,sans-serif;
  margin:0; background:#fafafa; color:#222;
}
header{
  padding:10px 20px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* Masonry container */
.masonry{
  margin:2rem auto; max-width:1200px; padding:0;
}

/* Sizers */
#gallery .gutter-sizer{ width:var(--gutter); }
#gallery .grid-sizer,
#gallery .card{ width:calc((100% - (2 * var(--gutter))) / 3); }

/* Items */
.card{
  position:relative; margin-bottom:var(--gutter);
  overflow:hidden; border-radius:8px; background:#eee;
}
.card img{
  display:block; width:100%; height:auto; border-radius:8px;
  transition:transform .3s ease, opacity .2s ease; opacity:0;
}
.card.loaded img{ opacity:1; }
.card:hover img{ transform:scale(1.05); }

.card .overlay{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.55); color:#fff; padding:6px 10px;
  font-size:13px; opacity:0; transition:opacity .2s ease;
}
.card:hover .overlay{ opacity:1; }

#sentinel{ text-align:center; padding:30px; color:#777; }

@media (max-width:1024px){
  #gallery .grid-sizer, #gallery .card{ width:calc((100% - var(--gutter)) / 2); }
}
@media (max-width:600px){
  #gallery .grid-sizer, #gallery .card{ width:100%; }
}