/* Keep artwork inside its tile without stretching or cutting off poster edges. */
.thumb.has-poster,
.catalog-art.has-poster {
  background-color: #071326;
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 100% 100%, contain;
}

/* The home carousel uses poster-shaped tiles that scale with the viewport. */
.cards { grid-auto-columns: clamp(170px, 19vw, 260px); }
.thumb { height: auto; aspect-ratio: 2 / 3; }

/* More room for the complete poster and a readable description at every width. */
.catalog-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 510px), 1fr)); }
.catalog-card {
  grid-template-columns: clamp(125px, 17vw, 165px) minmax(0, 1fr);
  height: clamp(190px, 18vw, 235px);
}

.new-empty {
  margin: 0;
  padding: 20px 16px;
  border: 1px solid #193455;
  border-radius: 11px;
  background: #09172b;
  color: #9fb0c5;
}

@media (max-width: 760px) {
  .cards { grid-auto-columns: min(44vw, 220px); }
  .thumb { height: auto; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-card { grid-template-columns: 125px minmax(0, 1fr); height: 190px; }
}

/* Home Neu only: fill the existing poster box without changing its geometry.
   The first background is the existing readability gradient, the second artwork. */
body.home-no-banner #neu .cards .card .thumb.has-poster {
  background-size: 100% 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
}
.home-no-banner #neu .cards .card.is-game-card .game-platform-rail {
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  justify-content: flex-start !important;
}
.home-no-banner #neu .cards .card.is-game-card .game-release-rail {
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  justify-content: flex-end !important;
}