.portrait-fallback > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  filter: saturate(.9) contrast(1.06);
  display: block;
  border-radius: inherit;
  transform: scale(1.01);
}

.hero-portrait-visible {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  transform: none !important;
  z-index: 4;
}

.hero-portrait-visible .portrait-frame {
  position: relative;
  z-index: 2;
  opacity: 1;
}

.hero-portrait-visible .portrait-fallback {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border-radius: 48% 48% 4px 4px / 28% 28% 4px 4px;
  background: linear-gradient(180deg, transparent 58%, rgba(2, 11, 19, .48));
  box-shadow: inset 0 0 42px rgba(230, 201, 130, .12);
}