.contact {
  grid-template-columns: clamp(220px, 24vw, 320px) minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(24px, 3.5vw, 48px);
}
.contact-portrait {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.contact-person,
.contact-details { min-width: 0; }
.contact-person small { display: block; margin-top: 24px; }

@media (max-width: 1100px) {
  .contact {
    display: grid;
    grid-template-columns: clamp(180px, 26vw, 260px) minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 40px);
    row-gap: 24px;
  }
  .contact-portrait { grid-row: 1 / 3; }
  .contact-person { align-self: end; }
  .contact-details { align-self: start; margin-top: 0; }
}
@media (max-width: 600px) {
  .contact { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .contact-portrait { grid-row: auto; width: min(100%, 280px); }
  .contact-person { align-self: auto; }
  .contact-person small { margin-top: 20px; }
}