.realm-card .realm-icon.realm-art,
.chosen-sigil.realm-art {
  color: transparent;
  background-color: #10182a;
  background-position: center 16%;
  background-size: cover;
  border: 1px solid color-mix(in srgb, var(--realm-color) 72%, #fff);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .48), 0 0 15px color-mix(in srgb, var(--realm-color) 28%, transparent);
}

.realm-card .realm-icon.realm-art {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.chosen-sigil.realm-art {
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.ruler-portrait.has-art {
  min-height: 300px;
  justify-content: end;
  align-content: end;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(4, 8, 16, .05) 28%, rgba(5, 9, 18, .96) 100%),
    var(--portrait-url) center 14% / cover no-repeat;
}

.ruler-portrait.has-art > span:first-child { display: none; }
.ruler-portrait.has-art strong {
  width: calc(100% + 32px);
  margin: 0 -16px -16px;
  padding: 42px 12px 14px;
  background: linear-gradient(transparent, rgba(4, 8, 16, .96));
  text-shadow: 0 2px 8px #000;
}