.rarity-filters {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 8px;
  margin-bottom: 14px;
}

.rarity-filters button {
  --filter-color: #aab3c3;
  color: color-mix(in srgb, var(--filter-color) 80%, #fff);
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--filter-color) 38%, transparent);
  background: color-mix(in srgb, var(--filter-color) 6%, transparent);
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 9px 12px;
  font-size: 8px;
  font-weight: 900;
  transition: border-color .18s, background .18s, transform .18s;
}

.rarity-filters button:hover {
  border-color: var(--filter-color);
  transform: translateY(-1px);
}

.rarity-filters button.is-active {
  color: #070a11;
  border-color: var(--filter-color);
  background: var(--filter-color);
  box-shadow: 0 7px 20px color-mix(in srgb, var(--filter-color) 18%, transparent);
}

.rarity-filter-comum { --filter-color: #aab3c3 !important; }
.rarity-filter-incomum { --filter-color: #48d58b !important; }
.rarity-filter-raro { --filter-color: #55a7ff !important; }
.rarity-filter-lendario { --filter-color: #ffb23e !important; }
.rarity-filter-imortal { --filter-color: #ff596f !important; }
.rarity-filter-arcano { --filter-color: #bc68ff !important; }
.rarity-filter-alem { --filter-color: #e971ff !important; }
.rarity-filter-celestial { --filter-color: #5edcff !important; }
.rarity-filter-divino { --filter-color: #fff0a1 !important; }
.rarity-filter-cosmico { --filter-color: #ff82df !important; }

@media (max-width: 700px) {
  .rarity-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 7px;
  }

  .rarity-filters button {
    flex: 0 0 auto;
  }
}