/* 2. The image itself can keep your sizing rules */
.portrait img {
  margin-top: 60px;
  display: block;           /* remove inline‐baseline gaps */
  width: auto;
  height: auto;
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
  justify-content: center;
  /* remove any min-* if you don’t want forced letterboxing */
}
/* OUTER FRAME  ───────────────────────────────────────────── */
.home-portrait {
  /* centring & sizing (unchanged) */
  margin: 34px auto 0;
  display: flex;
  justify-content: center;
  align-items:     center;

  width: 283px;
  height:275px;

  /* frame colours */
  background-color: #d6c7a3;       /* matte */
  border: 2px inset #dbcfb1;       /* thin surround */
  border-radius: 2px;

  /* ↓↓↓ INSET bevel illusion ↓↓↓ */
  /* darker inner shadow at top-left, lighter highlight bottom-right */
  box-shadow:
      inset  3px  3px 6px #c3b797,   /* top-left shadow */
      inset -3px -3px 6px #e6d9bd; /* bottom-right highlight */
}

/* OUTER FRAME  ───────────────────────────────────────────── */
.start-portrait {
  /* centring & sizing (unchanged) */
  margin: 0px auto 10px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items:     center;

  width: 200px;
  height:184px;

  /* frame colours */
  background-color: #eee1c4;       /* matte */
  border: 5px outset #dbcfb1;       /* thin surround */
  border-radius: 10px;

  /* ↓↓↓ INSET bevel illusion ↓↓↓ */
  /* darker inner shadow at top-left, lighter highlight bottom-right */
  box-shadow:
      outset  3px  3px 6px #d6c7a3,   /* top-left shadow */
      outset -3px -3px 6px #ada387; /* bottom-right highlight */
}

/* INNER IMAGE  ───────────────────────────────────────────── */
.qvii-logo {
  display:block;
  max-width:  270px;
  max-height: 270px;
  width:auto; height:auto;
  object-fit:contain;
}