.game {
  max-width: min(400px, 90%);
}

.game div {
  line-height: 1.2;
  text-box-trim: trim-both;
}

.game a {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;
  color: white;
}

.game img {
  height: 380px;
  /* Percent does not work here since the parent has no fixed height use `vw instead`... */
  max-height: 60vw;

  width: auto;
  max-width: 100%;

  border-style: solid;
  border-width: 4px;
  border-color: var(--green);

  background-color: var(--green);

  margin-bottom: 12px;
}

.game h2, .game div {
  width: 100%;
}

.game h2 {
  font-size: 32px;
  font-weight: bold;
  color: var(--green);

  text-align: center;

  margin-bottom: 10px;
}

.game b {
  font-weight: bold;
  color: var(--green);
}

.game a div {
  margin-bottom: 20px;
}

.game a div:last-of-type {
  margin-bottom: 0;
}

.game {
  transition: all .1s ease-in-out;
}

.game:hover {
  transform: scale(1.065);
}

@media (max-width: 415px) {
  .game div {
    line-height: normal;
    text-box-trim: none;
  }
  .game h2 {
    margin-bottom: 8px;
  }
  .game a div {
    margin-bottom: 8px;
  }
  .game a div:last-of-type {
    margin-bottom: 0;
  }
  .square img {
    max-height: 95vw;
  }
}