.game-box {
  grid-area: moves;
  padding: 2rem;
  padding-top: var(--header-margin);
  min-width: 35rem;
  height: 100vh;
}

.game {
  height: 100%;
  display: grid;
  grid-template-rows: 3.8rem 22rem auto 8.4rem;
}

.game-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
}

.game-tabs--condensed {
  grid-template-columns: 1fr 1fr 1fr;
}

.span2 {
  grid-row-end: span 2;
}

.span3 {
  grid-row-end: span 3;
}

@media (orientation: portrait) {
  .game-box {
    padding: 0;
    height: auto;
    min-height: 100vh;
  }

  .game {
    display: block;
  }
}

@media (orientation: landscape) and (max-height: 400px) {
  .game {
    grid-template-rows: 3.8rem 1fr 6.4rem;
  }
}
