/* The original logo always keeps its 934:362 aspect ratio. */
.table-hint {
  display: none;
}

.hero-grid {
  grid-template-columns: 1.2fr .8fr;
}

.hero-art {
  width: min(100%, 380px);
  margin-left: auto;
}

.hero-art img {
  width: auto;
  height: auto;
  max-height: 390px;
  margin-inline: auto;
}

.game img {
  aspect-ratio: auto;
}

@media (max-width: 640px) {
  .section .table-hint {
    display: block;
    font-size: .875rem;
    margin-bottom: -12px;
    color: var(--cyan);
  }
  html {
    scroll-padding-top: 170px;
  }

  .header-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding-block: 8px 10px;
  }

  .header .brand img {
    width: 180px;
    height: auto;
    max-width: none;
  }

  .header .actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1.5fr;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-art {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 18px;
    text-align: left;
  }

  .hero-art img {
    max-height: 260px;
  }

  .hero-art figcaption {
    padding: 0;
  }

  .section {
    scroll-margin-top: 170px;
  }
}