/* Cinematic portrait treatment: type stays in accessible HTML above the image. */
.hero-shape { display: none; }
.portrait-wrap {
  left: 12%;
  top: 0;
  width: 76%;
  height: 630px;
  filter: none;
  opacity: 1;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.portrait-wrap img {
  object-fit: cover;
  object-position: center center;
}
.portrait-fade {
  background: linear-gradient(to right, #111310 0%, transparent 20%, transparent 76%, #111310 100%),
    linear-gradient(to bottom, transparent 62%, #111310 100%);
}
.hero-left, .hero-right { text-shadow: 0 2px 14px #000b; }
.hero-right { background: linear-gradient(to right, transparent, #11131099 30%, #111310bb); }
@media (max-width: 760px) {
  .portrait-wrap {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 420px;
    margin-top: -10px;
    mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  }
  .portrait-fade { background: linear-gradient(to bottom, transparent 60%, #111310); }
  .hero-right { background: none; }
}
@media (max-width: 540px) {
  .portrait-wrap { height: 345px; }
}