html, body { margin: 0; }
.gallery {
  display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start;
  padding: 32px; background: #D9DCE2; min-height: 100vh; box-sizing: border-box;
}
.card-wrap { margin: 0; }
.card-label { margin: 0 0 10px; font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #2B2F3A; }
.card { position: relative; overflow: hidden; flex: none; box-sizing: border-box; box-shadow: 0 10px 34px rgba(0, 0, 0, .2); }


.show-guides .card::after {
  content: ""; position: absolute; inset: .125in; z-index: 99; pointer-events: none;
  outline: 1px dashed rgba(220, 0, 0, .9);
}
.show-guides .card::before {
  content: ""; position: absolute; inset: .25in; z-index: 99; pointer-events: none;
  outline: 1px dotted rgba(0, 140, 255, .9);
}


.render-one .gallery { display: block; padding: 0; background: none; min-height: 0; }
.render-one .card { box-shadow: none; }
.render-one .card-label { display: none; }

@media print {
  .gallery { display: block; padding: 0; background: none; min-height: 0; }
  .card { box-shadow: none; break-after: page; }
  .card-label { display: none; }
}