/*
 * Shared Epic preview gap coverage
 * Keep the complete source artwork spanning visible panel gaps so the final
 * panel never exposes the preview background in either Light or Dark Vision.
 */
.epic-panel img {
  width: calc(var(--art-width-px) + (var(--cols) - 1) * var(--epic-gap-px));
  height: calc(var(--art-height-px) + (var(--rows) - 1) * var(--epic-gap-px));
}

/* Fallback for legacy engines without CSS typed arithmetic. The current Epic
   catalogue ranges from one to seven columns and one to three rows. */
@supports not (width: calc(1px * 1)) {
  .art-wrapper[style*="--cols: 2;"] .epic-panel img { width: calc(var(--art-width-px) + var(--epic-gap-px)); }
  .art-wrapper[style*="--cols: 3;"] .epic-panel img { width: calc(var(--art-width-px) + var(--epic-gap-px) + var(--epic-gap-px)); }
  .art-wrapper[style*="--cols: 4;"] .epic-panel img { width: calc(var(--art-width-px) + var(--epic-gap-px) + var(--epic-gap-px) + var(--epic-gap-px)); }
  .art-wrapper[style*="--cols: 5;"] .epic-panel img { width: calc(var(--art-width-px) + var(--epic-gap-px) + var(--epic-gap-px) + var(--epic-gap-px) + var(--epic-gap-px)); }
  .art-wrapper[style*="--cols: 6;"] .epic-panel img { width: calc(var(--art-width-px) + var(--epic-gap-px) + var(--epic-gap-px) + var(--epic-gap-px) + var(--epic-gap-px) + var(--epic-gap-px)); }
  .art-wrapper[style*="--cols: 7;"] .epic-panel img { width: calc(var(--art-width-px) + var(--epic-gap-px) + var(--epic-gap-px) + var(--epic-gap-px) + var(--epic-gap-px) + var(--epic-gap-px) + var(--epic-gap-px)); }
  .art-wrapper[style*="--rows: 2;"] .epic-panel img { height: calc(var(--art-height-px) + var(--epic-gap-px)); }
  .art-wrapper[style*="--rows: 3;"] .epic-panel img { height: calc(var(--art-height-px) + var(--epic-gap-px) + var(--epic-gap-px)); }
}