#gallery-content {
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
}

#games {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5em
}

.game-container {
  display: grid;
  gap: 10px 10px;
  grid-template-columns: 1fr 1fr;
}

/*
  .game-container

    1      1fr       2       1fr      3
  1 +----------------+----------------+
    |                                 |
    |    .game-thumbnail-container    |
    |                                 |
  2 +---------------------------------+
    |                |                |
    |     .name      |                |
    |                |                |
  3 +----------------+     .genre     +
    |                |                |
    |    .creator    |                |
    |                |                |
  4 +----------------+----------------+
*/

.game-thumbnail-container {
  grid-column-start: 1;
  grid-column-end: 3;
}

.game-thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 0.5rem;
  /* for the :hover animation */
  transition: scale 0.5s, box-shadow 0.5s;
}

.game-thumbnail:hover {
  box-shadow: 0rem 0rem 0.8rem rgba(255, 255, 255, 0.712);
  cursor: pointer;
  scale: 1.05;
}

.creator {
  grid-row: 3;
}

.genre {
  /* center text vertically */
  margin-top: auto;
  margin-bottom: auto;
  /* refer to diagram */
  grid-row-start: 2;
  grid-row-end: 4;

  text-align: right;
  color: grey;
  font-weight: bold;
  font-size: 1em;
}

.name {
  grid-row: 2;
  font-weight: bold;
  flex-flow: row wrap;
}

@media only screen and (min-width: 600px) {
  .game-container {
    width: 40vw;
  }
}