/* Portrait treatment kept separate so it is easy to adjust or replace. */
.portrait-frame {
  position: absolute;
  left: 50%; top: 50%;
  width: 280px; height: 382px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 145px 145px 18px 18px;
  background: #e8ece6;
  box-shadow: 0 20px 32px #1e2b2524;
  z-index: 2;
}
.portrait-frame img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center top;
  mix-blend-mode: multiply;
}
.hero-card {
  width: 178px; height: 195px; left: 27%; top: 64%;
  padding: 18px;
  z-index: 1;
  opacity: .98;
}
.card-dot { width: 7px; height: 7px; margin-bottom: 22px; }
.hero-card p { font-size: 8px; letter-spacing: .12em; margin-bottom: 7px; }
.hero-card strong { font-size: 24px; }
.grid-mark { right: 19px; bottom: 12px; font-size: 28px; }
@media (max-width: 720px) {
  .portrait-frame { width: 240px; height: 325px; }
  .hero-card { width: 160px; height: 176px; left: 27%; top: 65%; padding: 16px; }
  .hero-card strong { font-size: 22px; }
  .card-dot { margin-bottom: 21px; }
}