.partner-card {
  position: relative;
  font-size: 9px;
  width: 17.8em;
  height: 31em;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow: 4px 6px 10px rgba(107, 114, 128, 0.4);
}

.partner-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 10;
}

.partner-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  width: 50%;
  height: 50%;
  transform: scale(2);
  transform-origin: top left;
  border-style: solid;
  border-image-slice: 60% 16% 28% 68% fill;
  border-image-width: 105px 30px 60px 110px;
  border-image-outset: 2px 5px 15px 6px;
  border-image-repeat: stretch stretch;
}

.partner-faction {
  position: absolute;
  inset: 0;
  left: 5.2em;
  top: 0;
  object-fit: cover;
  z-index: 6;
  pointer-events: none;
  filter: brightness(0.85);
}

.partner-job {
  position: absolute;
  left: 0.8em;
  top: 0.8em;
  width: 3.6em;
  height: 3.6em;
  overflow: hidden;
  border-radius: 0.125rem;
  z-index: 20;
  background: black;
}

.partner-job img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.partner-rarity {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6em;
  z-index: 20;
  pointer-events: none;
}

.partner-shade {
  position: absolute;
  top: 88%;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 15;
}

.partner-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7em;
  z-index: 25;
  text-align: center;
  color: white;
  font-size: 1.5em;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.9));
}

.partner-card-link {
  display: inline-block;
}