.game-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5fr minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 5fr minmax(0, 1fr);
  grid-template-areas:
    ". partner ."
    "opponent-left table opponent-right"
    ". player .";
  column-gap: 5px;
  row-gap: var(--space-4);
  align-items: center;
  justify-items: center;
  min-height: 0;

  & > .player-name {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  & > .player-name.-left {
    grid-area: opponent-left;
  }

  & > .player-name.-top {
    grid-area: partner;
    justify-content: end;
  }

  & > .table {
    width: 100%;
    height: 100%;
    grid-area: table;
    min-height: 0;
  }

  & > .player-name.-bottom {
    grid-area: player;
    justify-content: start;
  }

  & > .player-name.-right {
    grid-area: opponent-right;
  }
}