/* Front-end & admin preview */
.gallery-grid {
  --acg-gap: 16px;
  --acg-radius: 22px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--acg-gap);
  align-items: stretch;
}
.gallery-grid .gallery-item {
  grid-column: span 4;
  position: relative;
  overflow: hidden;
  border-radius: var(--acg-radius);
  aspect-ratio: 4 / 3;
}
.gallery-grid .gallery-item.is-xl {
  grid-column: span 6;
  aspect-ratio: 16 / 10;
}
.gallery-grid .gallery-item .acg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* subtle hover */
.gallery-grid .gallery-item .acg-link,
.gallery-grid .gallery-item img {
  transition: transform .35s ease;
}
.gallery-grid .gallery-item:hover img {
  transform: scale(1.03);
}

/* Responsive */
@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(8, 1fr); }
  .gallery-grid .gallery-item { grid-column: span 4; }
  .gallery-grid .gallery-item.is-xl { grid-column: span 8; }
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery-grid .gallery-item,
  .gallery-grid .gallery-item.is-xl { grid-column: span 4; aspect-ratio: 16 / 12; }
}

/* Admin generator */
.acg-preview { background:#fff; padding:8px; border:1px solid #e3e3e3; border-radius:12px; }
.acg-preview .gallery-item { background:#f6f7f7; }
.acg-notice { background:#fffbe5; border-left:4px solid #ffb900; padding:10px 12px; }