fixes

src/pages/_Team.astro

@@ -20,20 +20,21 @@ const ui = t(lang);
     </div>
   </section>
 
-  <div class="team-photo">
+  <div class="container">
+  <figure class="team-photo">
     <Picture
       src={teamPhoto}
       alt={ui.team.photoAlt}
       formats={['avif']}
       fallbackFormat="webp"
-      widths={[640, 960, 1440]}
-      sizes="100vw"
+      widths={[640, 960, 1296, 1920, 2592]}
+      sizes="(min-width: 90rem) 81rem, calc(100vw - 2 * clamp(1.25rem, 5vw, 5rem))"
       loading="eager"
       decoding="async"
-      class="img-cover img-mono team-photo__img"
+      class="img-mono team-photo__img"
       pictureAttributes={{ class: 'team-photo__picture' }}
     />
-    <div class="team-photo__overlay" aria-hidden="true"></div>
+  </figure>
   </div>
 
   <section class="section" aria-label={ui.nav.team}>
@@ -72,16 +73,11 @@ const ui = t(lang);
     .team-intro__lead { grid-column: 9 / span 4; align-self: end; }
   }
 
-  .team-photo {
-    position: relative;
-    /* Explicit height: an aspect-ratio with max-height would transfer the cap to the width. */
-    height: min(66.67vw, 80svh);
-    min-height: 20rem;
-    overflow: hidden;
-  }
-  :global(.team-photo__picture) { position: absolute; inset: 0; }
-  .team-photo__img, :global(.team-photo__img) { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
-  .team-photo__overlay { position: absolute; inset: 0; background: var(--overlay); opacity: 0.6; }
+  /* Inside the content column at the photo's own proportions: no crop, no zoom, so every pixel
+     the browser shows exists in the source. Widths go to 2592 for retina screens. */
+  .team-photo { margin: 0; }
+  :global(.team-photo__picture) { display: block; }
+  .team-photo__img, :global(.team-photo__img) { display: block; width: 100%; height: auto; }
 
   .people {
     display: grid;