#page {
  --page-pad: clamp(12px, 4vw, 32px);
  --card: #ffffff;
  --card-hover: #f0f0ff;
  --card-line: #c0c0d4;
  --card-hover-line: #000080;
  --card-image-line: oklch(0.86 0.006 300);
  max-width: calc(var(--page-width) + 2 * var(--page-pad));
  padding: 0 var(--page-pad) 90px;
}
body.dark #page {
  --card: #000000;
  --card-hover: #20202c;
  --card-line: #44445a;
  --card-hover-line: #d0d0e0;
  --card-image-line: oklch(0.27 0.01 300);
}

.gamegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 32px 24px;
  align-items: start;
}

.gamecard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.gamecard:hover {
  background: var(--card-hover);
  border-color: var(--card-hover-line);
  text-decoration: none;
}

.gamecard picture {
  display: block;
  padding: var(--card-pad-y, 0) var(--card-pad-x, 0);
  background: var(--card);
  border-bottom: 1px solid var(--card-image-line);
}
.gameimg {
  display: block;
  width: 100%;
  height: auto;
}
body.dark .gameimg_light { display: none; }
body:not(.dark) .gameimg_dark { display: none; }

.gamecard_text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 20px 22px 24px;
}
.gamecard_name {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.gamecard_desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

#page > p:last-child { margin-top: 44px; }