/* Keep the protected sprites at exact integer scales instead of stretching them. */
.character-pack-catalogue .pack-card .character-collage {
  aspect-ratio: auto !important;
  height: 170px;
  max-height: none;
  padding: 12px 10px 0;
  gap: 4px;
  align-items: flex-end !important;
  justify-content: center;
}
.character-pack-catalogue .pack-card .character-collage img,
.character-pack-catalogue .pack-card .character-collage.sparse-collage img {
  flex: none !important;
  width: var(--sprite-width-3x) !important;
  height: var(--sprite-height-3x) !important;
  min-width: 0;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill;
  image-rendering: pixelated;
}
@media (min-width: 1700px) {
  .character-pack-catalogue .pack-card .character-collage {
    height: 215px;
  }
  .character-pack-catalogue .pack-card .character-collage img,
  .character-pack-catalogue .pack-card .character-collage.sparse-collage img {
    width: var(--sprite-width-4x) !important;
    height: var(--sprite-height-4x) !important;
  }
}
/* Three-column cards get narrow on laptops; step down by one whole pixel scale. */
@media (max-width: 1299px) {
  .character-pack-catalogue .pack-card .character-collage {
    height: 120px;
  }
  .character-pack-catalogue .pack-card .character-collage img,
  .character-pack-catalogue .pack-card .character-collage.sparse-collage img {
    width: var(--sprite-width-2x) !important;
    height: var(--sprite-height-2x) !important;
  }
}
@media (min-width: 1240px) and (max-width: 1299px) {
  .character-pack-catalogue .pack-card .character-collage {
    height: 170px;
    padding-right: 4px;
    padding-left: 4px;
    gap: 1px;
  }
  .character-pack-catalogue .pack-card .character-collage img,
  .character-pack-catalogue .pack-card .character-collage.sparse-collage img {
    width: var(--sprite-width-3x) !important;
    height: var(--sprite-height-3x) !important;
  }
}
/* The catalogue has two wider columns in this range. */
@media (min-width: 870px) and (max-width: 1000px) {
  .character-pack-catalogue .pack-card .character-collage {
    height: 170px;
  }
  .character-pack-catalogue .pack-card .character-collage img,
  .character-pack-catalogue .pack-card .character-collage.sparse-collage img {
    width: var(--sprite-width-3x) !important;
    height: var(--sprite-height-3x) !important;
  }
}
@media (max-width: 620px) {
  .character-pack-catalogue .pack-card .character-collage {
    gap: 3px;
    padding: 10px 8px 0;
  }
}

/* Keep the four coming-soon character cards aligned across both grid rows. */
.preview-pack-catalogue {
  grid-auto-rows: 1fr;
}
.preview-pack-catalogue .pack-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.preview-pack-catalogue .pack-card .preview-collage {
  flex: 0 0 auto;
}
.preview-pack-catalogue .pack-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.preview-pack-catalogue .pack-card-action {
  align-self: flex-start;
  margin-top: auto;
}