.hero-portrait {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.hero-portrait::before,
.hero-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-portrait::before {
  z-index: -2;
  background-image: url("../images/portrait.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.hero-portrait::after {
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.82) 100%);
}

.hero-portrait > * {
  position: relative;
  z-index: 1;
}

.portrait-frame {
  display: none;
}

@media (max-width: 980px) {
  .hero-portrait::before {
    background-size: auto 96%;
  }
}

@media (max-width: 520px) {
  .hero-portrait::before {
    background-size: auto 92%;
  }
}