/* Five independent assets, recomposed to match the approved poster. */
#top.hero-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 58.2fr) minmax(0, 41.8fr);
  gap: clamp(2px, .47vw, 8px);
  aspect-ratio: 1698 / 926;
  overflow: hidden;
  isolation: isolate;
  background: #fffdf7;
}
#top.hero-collage .hero-game {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
#top.hero-collage .hero-game > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
}
#top.hero-collage .hero-game::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 0 solid var(--yellow);
  pointer-events: none;
}
#top.hero-collage .hero-game:hover::after,
#top.hero-collage .hero-game:focus-visible::after { border-width: 5px; }
#top.hero-collage .hero-game:focus-visible { outline: none; }
#top.hero-collage > .hero-logo {
  position: absolute;
  z-index: 2;
  top: 50.5%;
  left: 50%;
  width: 31.5%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  image-rendering: pixelated;
}
/* Fit the complete poster below the banner, preserving its composition. */
@media (min-width: 761px) {
  #top.hero-collage {
    width: min(100%, calc((100svh - var(--party-banner-height, 112px) - 16px) * 1698 / 926));
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  #top.hero-collage .hero-game:hover::after,
  #top.hero-collage .hero-game:focus-visible::after { border-width: 3px; }
}