@media (orientation: landscape) {
  :root {
    --card-height: 6vh;
    --card-width: calc(var(--card-height) * (500/726));
  }
  
  .tableau {
    font-size: 1rem;
  }
}

@media (orientation: portrait) {
  :root {
    --card-width: 7.5vw;
    --card-height: calc(var(--card-width) * (726/500));
  }
  
  .tableau {
    font-size: 0.75rem;
  }
}

:root {
  --gap-size: 0.4vw;
  font-family: system-ui;
  font-size: 1rem;
}


img {
  max-width: 100%;
}

.tableau {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-size);
  background-color: green;
  padding: var(--gap-size);
}

.tableau > div { /* Child combinator */
  padding: var(--gap-size);
  color: lightgreen;
}

#cell29 {
  grid-column: 9 / span 3;
}

.card-column {
  text-align: center;
  touch-action: none;
  border: 1px solid #999999;
  border-radius: 3px;
}

.card {
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
  border: 1px solid #999999;
  border-radius: 3px;
}

.card1 {
  position: relative;
  z-index: 0;
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
}

.card2 {
  position: relative;
  z-index: 1;
  bottom: calc(0.8 * var(--card-height));
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
}

.card3 {
  position: relative;
  z-index: 2;
  bottom: calc(1.6 * var(--card-height));
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
}

.card4 {
  position: relative;
  z-index: 3;
  bottom: calc(2.4 * var(--card-height));
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
}

.card5 {
  position: relative;
  z-index: 4;
  bottom: calc(3.2 * var(--card-height));
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
}

.card6 {
  position: relative;
  z-index: 5;
  bottom: calc(4.0 * var(--card-height));
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
}

.card7 {
  position: relative;
  z-index: 6;
  bottom: calc(4.8 * var(--card-height));
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
}

.card8 {
  position: relative;
  z-index: 7;
  bottom: calc(5.6 * var(--card-height));
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
}

.card9 {
  position: relative;
  z-index: 8;
  bottom: calc(6.4 * var(--card-height));
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
}

.card10 {
  position: relative;
  z-index: 9;
  bottom: calc(7.2 * var(--card-height));
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
}

.card11 {
  position: relative;
  z-index: 10;
  bottom: calc(8.0 * var(--card-height));
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
}

.card12 {
  position: relative;
  z-index: 11;
  bottom: calc(8.8 * var(--card-height));
  touch-action: none;
  height: var(--card-height);
  width: var(--card-width);
}