.team-gallery {
  --gallery-background: #f4f8fc;
  --gallery-panel: #fff;
  --gallery-ink: #102b49;
  --gallery-muted: #405a73;
  --gallery-line: #d3e0ec;
  --gallery-accent: #006a96;
  background: var(--gallery-background);
  color: var(--gallery-ink);
  padding-block: clamp(38px, 7vw, 88px);
}

:root[data-theme="dark"] .team-gallery {
  --gallery-background: #091627;
  --gallery-panel: #101f33;
  --gallery-ink: #edf4fc;
  --gallery-muted: #b9cadd;
  --gallery-line: #30435b;
  --gallery-accent: #67e8f9;
}

.team-gallery .team-gallery-intro { padding-bottom: 28px; }
.team-gallery .team-gallery-intro > p:first-child { font-size: 12px; letter-spacing: .14em; color: var(--gallery-accent); }
.team-gallery h1 { margin-block: 6px 12px; font-size: clamp(42px, 7vw, 78px); letter-spacing: -.045em; }
.team-gallery :is(h1, h2) { color: var(--gallery-ink); }
.team-gallery p, .team-gallery time { color: var(--gallery-muted); }
.team-gallery-event { padding-block: 28px; border-top: 1px solid var(--gallery-line); }
.team-gallery-event h2 { margin-bottom: 4px; font-size: clamp(23px, 4vw, 34px); }
.team-gallery-event time { font-size: 14px; }
.team-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr)); gap: 18px; margin-top: 18px; }
.team-gallery-grid a { display: block; overflow: hidden; border: 1px solid var(--gallery-line); border-radius: 9px; background: var(--gallery-panel); color: var(--gallery-ink); }
.team-gallery-grid a:hover { border-color: var(--gallery-accent); color: var(--gallery-accent); }
.team-gallery-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.team-gallery-grid span { display: block; padding: 12px 14px; overflow-wrap: anywhere; }
.team-gallery dialog { width: min(92vw, 1200px); max-height: 94vh; padding: 12px; border: 1px solid var(--gallery-line); border-radius: 10px; background: var(--gallery-panel); color: var(--gallery-ink); text-align: right; }
.team-gallery dialog::backdrop { background: rgb(4 12 24 / 85%); }
.team-gallery dialog figure { margin: 10px 0 0; text-align: center; }
.team-gallery dialog img { display: block; width: 100%; max-height: 74vh; object-fit: contain; }
.team-gallery dialog figcaption { padding: 8px 4px 2px; overflow-wrap: anywhere; }
.team-gallery dialog button { border: 1px solid var(--gallery-line); border-radius: 5px; padding: 6px 12px; background: var(--gallery-background); color: var(--gallery-ink); }