.hero-portrait {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #c6cbd1;
}

.hero-portrait img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 27%;
}

.about-portrait {
  width: min(100%, 360px);
  aspect-ratio: 9 / 10;
  margin: 14px 0 0;
  overflow: hidden;
  border: 1px solid #b4c9c4;
  background: #c6cbd1;
}

.about-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

@media (max-width: 850px) {
  .hero-portrait { min-height: 340px; }
  .hero-portrait img { object-position: center 32%; }
}

@media (max-width: 620px) {
  .hero-portrait { min-height: 330px; }
  .hero-portrait img { object-position: center 28%; }
  .about-portrait { width: min(100%, 340px); margin-top: 6px; }
}