html {
  font-size: 1em;
}

@media (orientation: landscape) {
  :root {
    --card-height: 19vh;
    --card-width: calc(var(--card-height) * (500/726));
    --gutter-width: calc(49vw - (var(--card-width) * 3));
  }

  .adleft {
    touch-action: auto;
    width: var(--gutter-width);
    height: calc(5 * var(--card-height));
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 6;
  }

  .adright {
    touch-action: auto;
    width: var(--gutter-width);
    height: calc(5 * var(--card-height));
    grid-column-start: 8;
    grid-row-start: 1;
    grid-row-end: 6;
  }

  .adbanner {
    display: none;
  }
}

@media (orientation: portrait) {
  :root {
    --card-width: 16vw;
    --card-height: calc(var(--card-width) * (726/500));
    --gutter-width: 0px;
  }
  
  .adleft, .adright {
    position: none;
  }
  
  .adbanner {
    width: 99%;
  }
}

.tableau {
  max-width: 99%;
  display: grid;
  grid-template-columns: var(--gutter-width) repeat(6, var(--card-width)) var(--gutter-width);
  grid-auto-rows: var(--card-height);
  gap: 1px;
  background-color: green;
}

.tableau > div {
  touch-action: none;
  border: 1px solid #999999;
  border-radius: 3px;
  color: lightgreen;
  text-align: center;
}

.cardImg {
  touch-action: none;
  width: calc(var(--card-width) - 2px);
  height: calc(var(--card-height) - 2px);
}

.cardText {
  touch-action: none;
  position: absolute;
  font-size: calc(0.5 * var(--card-height));
  color: hsl(240 100 50 / 70%);
  z-index: 2;
}

#f5 {
  align-content: center;
}

#newsgame {
  touch-action: auto;
}

.gutter {
  grid-row: 1 / span 5;
  touch-action: auto;
}

#rightAd {
  grid-column: 8;
}