#dominoes {
  display: flex;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
}

.domino {
  --width: min(calc((210mm - 20mm) / 3), calc((297mm - 20mm) / 7));
  width: var(--width);
  height: calc(2 * var(--width));
  border: thin solid;
  display: grid;
  align-items: center;
  justify-items: center;
  break-inside: avoid;

  grid-template-rows: 1fr 1fr;
  & .a {
    transform: rotate(180deg);
    font-family: sans-serif;
    font-weight: bold;
  }
  & .b {
    font-style: italic;
    font-family: serif;
  }

  & > span {
    font-size: min(var(--width) * 0.4, calc((var(--width) - 0.2cm) / var(--length)));
    width: 100%;
    height: 100%;
    display: grid;
    justify-content: center;
    align-content: center;
  }
}

@media print {
  body > main > :not(#dominoes), body > :not(main) {
    display: none;
  }
}

@page {
  size: a4 landscape;
  margin: 5mm;
}