.about-hero { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.about-photo { display: block; flex-shrink: 0; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.about-text { max-width: calc(100% - 180px); }

@media (max-width: 44rem) {
  .about-hero { flex-direction: column; align-items: center; }
  .about-photo { width: 140px; height: 140px; }
  .about-text { max-width: 100%; }
}