/* Masonry using CSS columns */
.mg-wrap {
  --mg-columns: 2;
  --mg-gap: 16px;         /* one gap value for everything */
}

.mg-masonry {
  column-count: var(--mg-columns, 2);
  column-gap: var(--mg-gap);
  padding: var(--mg-gap); /* equal gap around the grid (top, sides, bottom) */
  box-sizing: border-box;
  background: transparent;
}

.mg-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--mg-gap);  /* equal vertical gap */
  break-inside: avoid;
  border-radius: 5px;
  overflow: hidden;           /* ensures rounded corners work */
  text-decoration: none;
}

.mg-item img,
.mg-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;         /* image matches container rounding */
}

.mg-gallery-title { margin: 1.25rem 0 .5rem; }
.mg-notice { padding: .75rem 1rem; background:#f8f8f8; border:1px solid #eee; border-radius:6px; }