.game, .game:hover { text-decoration: none; }

.game-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.game {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transition: all .2s ease-in-out;
  text-align: center;
}

a.game:hover {
  transform: scale(1.05);
}

.game-logo {
  height: 40%;
  object-fit: contain;
}

.game-gif {
  object-fit: cover;
  overflow: auto;
  width: 100%;
  height: 55%;
}

.game .about span {
  white-space: nowrap;
}

.lok {
  background-color: #fafafa;
  background-image: url("assets/games/lok-bg-faded.jpg");
  background-size: contain;
  color: black;
}
.lok .game-logo {
  height: 30%;
}

.bonfire {
  background-color: #2A2A2A;
}

.monster {
  background-color: #0F728D;
}

.sokobond-express {
  background-color: #fefefe;
  color: black;
}

.parabox {
  background-color: #2A2A2A;
  color: white;
}
.parabox .game-logo {
  height: 30%;
}

.ame-earlier-adventures {
  background-color: #c6e8f3;
  background: radial-gradient(circle, #c6e8f3 0%, #1e94c1 100%)
}
.ame-earlier-adventures .game-logo {
  height: 30%;
}
.ame-earlier-adventures .game-gif {
  object-fit: contain;
  height: auto;
}

.thinky-third-thursday {
  background-color: #551c09;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  font-size: 1rem;
}
.thinky-third-thursday .game-logo {
  display: block;
  height: auto;
}

.cosmic {
  background-color: #36395B;
}

.snowman {
  /*background-color: #F0F0E7;*/
  background-color: #FFFFFF;
}
.snowman .game-gif {
  object-fit: contain;
  height: auto;
}

.sokobond {
  background-color: #FBFBFB;
}
.sokobond .game-logo {
  width: 90%;
}
.sokobond .game-gif {
  object-fit: contain;
  height: auto;
}

.sokobond-express {
  justify-content: space-evenly;
}
.sokobond-express .game-logo {
  width: 100%;
  height: auto;
  object-fit: initial;
}

.sokobond-express .game-gif {
  object-fit: contain;
  height: auto;
}

.cerebral-puzzle-showcase {
  background-color: white;
  background-image: url("assets/games/cerebral-puzzle-showcase.jpg");
  background-position: center;
  background-size: cover;
  padding: 0;
}

.cerebral-puzzle-showcase img { display: none; }

.merch-store {
  background-color: #3a487c;
  background-image: url("assets/games/merch.png");
  background-position: center;
  background-size: cover;
  padding: 0;
}

.merch-store img { display: none; }

.podcast {
  background-color: #8e4559;
  background-image: url("assets/games/podcast.png");
  background-position: center;
  background-size: cover;
  padding: 0;
}

.podcast img { display: none; }

.new-voices-grant {
  background-color: #9AD3D6;
  justify-content: center;
}

.game .full-size {
  max-width: 100%;
  max-height: 100%;
  object-position: center;
}

.new-voices-grant .full-size {
  max-width: 120%;
  max-height: 120%;
}

/* size calculations */

.game .about {
  padding: 0.3em;
}

.game, .game-gif {
  border-radius: 1em;
}

.game {
  box-sizing: border-box;
  
  --game-card-width: min(250px, 45vw);
  --game-card-height: var(--game-card-width);
  
  width: var(--game-card-width);
  height: var(--game-card-height);
  
  padding: calc(var(--game-card-height) * 0.05);
  margin: calc(var(--game-card-height) * 0.025);
  
  font-size: calc(var(--game-card-height) * 0.06);
}

.non-games .game {
  --game-card-width: min(300px, 30vw);
  --game-card-height: calc(var(--game-card-width) * 3 / 4);
}