.credentials-with-portrait .credentials-profile {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,380px);
  grid-template-areas:"heading portrait" "details portrait";
  column-gap:clamp(2rem,4vw,3rem);
  row-gap:1.1rem;
  align-items:start;
}
.credentials-profile-heading { grid-area:heading; min-width:0; }
.credentials-with-portrait h2 { max-width:780px; font-size:clamp(2.2rem,4vw,3.8rem); }
.credentials-with-portrait .credentials-lead { max-width:750px; margin-bottom:0; }
.credentials-with-portrait .credentials-copy { grid-area:details; min-width:0; }
.credentials-with-portrait .credentials-copy > p { max-width:750px; }
.credentials-portrait {
  grid-area:portrait;
  align-self:center;
  width:100%;
  max-width:380px;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.credentials-portrait a { display:block; }
.credentials-portrait a:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
.credentials-portrait img {
  display:block;
  width:100%;
  height:auto;
  -webkit-mask-image:linear-gradient(#000 88%,transparent);
  mask-image:linear-gradient(#000 88%,transparent);
}
.credentials-with-portrait .credential-list { margin-top:1.25rem; }
@media (max-width:900px) {
  .credentials-with-portrait .credentials-profile {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"heading" "portrait" "details";
    gap:2rem;
  }
  .credentials-portrait { justify-self:center; max-width:280px; }
}
@media (max-width:600px) {
  .credentials-portrait { max-width:260px; }
  .credentials-with-portrait h2 { overflow-wrap:anywhere; hyphens:auto; }
}