.game-grid {
  display: grid;
  grid-gap: $base-spacing;
}

@media (min-aspect-ratio: 9/11) {
  .game-grid {
    grid-template-areas:
      "board game-info"
      "board move-list";
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content 1fr;
  }

  .container {
    max-width: 120vmin;
  }
}

@media (max-aspect-ratio: 9/11) {
  .game-grid {
    grid-template-areas:
      "game-info"
      "board"
      "move-list";
    grid-template-rows: min-content min-content min-content;
  }
}