/* Supplied portraits, credentials, and contact QR code. */
.photo-slot-main {
  display: block;
  width: min(100%, 350px);
  aspect-ratio: 4 / 5;
  margin-left: auto;
  padding: 0;
  object-fit: cover;
  object-position: center top;
  background: #26332d;
}

.photo-slot-main::after,
.photo-slot-main::before { display: none; }

.credential-badge {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .18));
}

.why-photo {
  position: absolute;
  inset: 0 16px 0 84px;
  margin: 0;
  overflow: hidden;
  opacity: .48;
}

.why-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #101714 0%, rgba(16, 23, 20, .12) 65%, #101714 100%);
}

.why-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.quote-mark { z-index: 2; }
.statement-card { z-index: 3; }
.detail-line { z-index: 1; }
.vertical-label { z-index: 3; }

.qr-slot {
  padding: 7px;
}

.qr-slot::before { display: none; }

.qr-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 780px) {
  .photo-slot-main { margin-left: 0; }
}

@media (max-width: 430px) {
  .why-photo { inset: 0 8px 0 42px; }
}