.card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--bg-color) 84%, #ffffff 16%);
}

.card__image {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  border-radius: 0.55rem;
  overflow: clip;
  background: color-mix(in srgb, var(--bg-color) 90%, #000000 10%);
}

.card__image > .card-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.card__image > .card-image--empty {
  min-height: 10rem;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--accent-color) 28%, transparent),
    color-mix(in srgb, var(--accent-color) 28%, transparent) 0.45rem,
    transparent 0.45rem,
    transparent 0.9rem
  );
}

.card__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.card__name {
  font-size: 0.9rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__name a {
  color: var(--secondary-color);
  white-space: nowrap;
}

.card__banner,
.card__rarity {
  font-size: 0.76rem;
  line-height: 1.2;
  color: color-mix(in srgb, var(--secondary-color) 70%, #ffffff 30%);
}

.card__banner_label {
  margin-right: 0.25rem;
  color: color-mix(in srgb, var(--primary-color) 85%, #ffffff 15%);
}

.card__rolls, .card__liquidity {
  font-size: 0.76rem;
  line-height: 1.2;
}

.card--common {
  border-color: color-mix(in srgb, var(--common-badge) 50%, transparent);
}

.card--uncommon {
  border-color: color-mix(in srgb, var(--uncommon-badge) 50%, transparent);
}

.card--rare {
  border-color: color-mix(in srgb, var(--rare-badge) 50%, transparent);
}

.card--epic {
  border-color: color-mix(in srgb, var(--epic-badge) 50%, transparent);
}

.card--legendary {
  border-color: color-mix(in srgb, var(--legendary-badge) 50%, transparent);
}