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

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

.tableau {
  display: grid;
  grid-template-columns: repeat(8, var(--card-width));
  grid-auto-rows: var(--card-height);
  place-content: center;
  background-color: green;
}

.tableau > div {
  border: 1px solid #999999;
  border-radius: 3px;
}

.cardHolder {
  place-content: center;
  padding: 1px;
}

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

.cardText {
  display: none;
  position: absolute;
  font-size: calc(0.5 * var(--card-height));
  color: brown;
  z-index: 1;
}

#msg {
  text-align: left;
  font-size: 0.8rem;
}