.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 10px;
}
.cards-tile {
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #eadcc8;
  border-radius: 12px;
  padding: 8px;
  display: grid;
  gap: 6px;
  justify-items: center;
  transition: transform .12s ease, border-color .12s ease;
}
.cards-tile:hover {
  transform: translateY(-2px);
  border-color: #d8ba95;
}
.cards-tile.rarity-rare {
  background: #fff9e6;
  border-color: #ead9a9;
}
.cards-tile.rarity-epic {
  background: #f6ecff;
  border-color: #d8bee9;
}
.cards-tile.rarity-legendary {
  background:
    linear-gradient(
      120deg,
      rgba(255, 108, 108, 0.30) 0%,
      rgba(255, 178, 92, 0.30) 18%,
      rgba(255, 233, 120, 0.30) 34%,
      rgba(136, 219, 146, 0.28) 50%,
      rgba(122, 190, 255, 0.28) 68%,
      rgba(186, 154, 255, 0.30) 84%,
      rgba(245, 165, 223, 0.30) 100%
    ),
    #ffffff;
  border-color: #c8d9ef;
}
.cards-tile img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 10px;
}
.cards-tile-name {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
}
.cards-subgroup + .cards-subgroup {
  margin-top: 16px;
}
.cards-subgroup h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #214f90;
}