html {
  font-family: sans-serif;
  font-size: 1em;
}

@media (orientation: landscape) {
  :root {
    --card-height: 30vh;
    --card-width: calc(var(--card-height) * (500/726));
  }
}

@media (orientation: portrait) {
  :root {
    --card-width: 12vw;
    --card-height: calc(var(--card-width) * (726/500));
  }
}

.tableau {
  display: grid;
  grid-template-columns: repeat(8, var(--card-width));
  max-width: 99%;
  place-content: center;
  gap: 0;
  background-color: green;
  color: lightgreen;
}

.tableau > div { /* Child combinator */
  touch-action: none;
}

.cardHolder {
  width: calc(var(--card-width) - 2px);
  height: calc(var(--card-height) - 2px);
  place-content: center;
  border: 1px solid #999999;
  border-radius: 3px;
}

.cardImg {
  max-width: calc(0.9 * var(--card-width));
  max-height: calc(0.9 * var(--card-height));
}

.cardCount {
  touch-action: none;
  position: absolute;
  visibility: hidden;
  font-size: calc(0.5 * var(--card-height));
  color: red;
  z-index: 2;
}

.msgBox {
  grid-column: 1 / span 7;
  text-align: start;
}

#adbanner {
  touch-action: auto;
  grid-column: 2 / span 6;
}