body, html {
  margin:0;
  padding:0;
  background:white;
}
* {
  box-sizing:border-box;
}
grid-system {
  display: grid;
  grid-template-columns: repeat(var(--columns, 50), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 50), minmax(0, 1fr));
  width:148mm;
  height:210mm;
  margin-inline: auto;
  container-type: size;
  cell {
    position: relative;
    grid-area: var(--landscape, var(--portrait, var(--pos)));
    z-index:var(--layer);
    @container (max-aspect-ratio: 1/1) { grid-area: var(--portrait, var(--landscape, var(--pos))); }
    container-type: size;
  }
  cell > *:not(.cell-resize-handle) {
      height:100%;
      width:100%;
      overflow:hidden;
      display: flex;
      flex-direction: column;
  }
  cell[data-locked="true"] {
    pointer-events:none;
  }
}
section {
margin-bottom:10px;
}
grid-system {
  box-shadow:0 0 10px #aaa;
}
@media print {
  section {
    margin-bottom:0;
  }
  grid-system {
    box-shadow:none;
  }
  @page {
    size: A5 portrait;
  }
}