/* container like your other sections */
.centered { max-width: 1200px; margin: 0 auto; }
.full-width { width: 100%; }
.shadow { box-shadow: 0 4px 24px rgba(40,40,40,0.12); }

/* Section spacing */
.mini-gallery { display: grid; gap: 32px; }

/* One 6-up group uses CSS Grid areas */
.gallery-group.grid {
  display: grid;
  gap: 20px;
  grid-auto-rows: 1fr;   /* rows share height; large spans two rows */
  align-items: stretch;
}

/* LEFT variant (big image on the left) */
.gallery-group.left {
  grid-template-columns: 2fr 2fr 1.2fr;      /* large spans first 2 columns */
  grid-template-rows: 1fr 1fr auto;
  grid-template-areas:
    "large large s1"
    "large large s2"
    "s3    s4    s5";
}

/* RIGHT variant (big image on the right) */
.gallery-group.right {
  grid-template-columns: 1.2fr 2fr 2fr;      /* large spans last 2 columns */
  grid-template-rows: 1fr 1fr auto;
  grid-template-areas:
    "s1 large large"
    "s2 large large"
    "s3  s4    s5";
}

/* Map cells to areas */
.gallery-group .large { grid-area: large; }
.gallery-group .s1    { grid-area: s1; }
.gallery-group .s2    { grid-area: s2; }
.gallery-group .s3    { grid-area: s3; }
.gallery-group .s4    { grid-area: s4; }
.gallery-group .s5    { grid-area: s5; }

/* Aspect + media */
.cell {
  position: relative;
  border-radius: var(--mg-radius, 16px);
  overflow: hidden;
  min-height: 0; /* fix grid overflow in some browsers */
}
.gallery-group .large { aspect-ratio: 16 / 10; }
.gallery-group .s1,
.gallery-group .s2 { height: 100%; }      /* fill the stacked rows */
.gallery-group .s3,
.gallery-group .s4,
.gallery-group .s5 { aspect-ratio: 4 / 3; }

.cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Respect your borderRadius input on all cells */
:host, .mini-gallery, .gallery-group { --mg-radius: 16px; } /* default */

@media (max-width: 1024px) {
  .gallery-group.left,
  .gallery-group.right {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "large large"
      "s1    s2"
      "s3    s4"
      "s5    s5";
  }
}
@media (max-width: 640px) {
  .gallery-group.left,
  .gallery-group.right {
    grid-template-columns: 1fr;
    grid-template-areas:
      "large"
      "s1"
      "s2"
      "s3"
      "s4"
      "s5";
  }
}

/* Hover scale */
.cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  transition: transform 220ms ease, filter 220ms ease;
  will-change: transform;            /* perf hint */
  cursor: zoom-in;                   /* communicates click-to-zoom */
}
.cell:hover img {
  transform: scale(1.02);
}

/* Lightbox backdrop */
.mg-lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.76);
  display: grid;
  place-items: center;
  z-index: 9999;

  outline: none; /* allow focus without outline */
}

/* Lightbox content */
.mg-lightbox-content {
  position: relative;
  max-width: 1024px;   /* <-- constrain to 1024px */
  width: min(1024px, 92vw);
  max-height: 92vh;
  border-radius: 12px;
  overflow: hidden;
  background: #000;    /* so letterbox bars look clean */
  box-shadow: 0 20px 80px rgba(0,0,0,0.45);
}

.mg-lightbox-content img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-out;
}

/* Close button */
.mg-lightbox-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.mg-lightbox-close:hover { opacity: 0.85; }