/* Scoped by data-slide: matches the deck's
AND this slide opened on its own (). The unscoped .team-card / .avatar rules this replaced were one rename away from colliding with another slide, the way closing and appendix did. */ [data-slide="team"] .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } @media (max-width: 700px) { [data-slide="team"] .team-grid { grid-template-columns: 1fr; } } /* .card from components.css supplies the surface fill; the 1px grid gap above draws the divider, so the card drops its own border. Centred on both axes: the two founders have different amounts of copy, so top-aligned left-flush cards left one photo floating over dead space. */ [data-slide="team"] .team-card { border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.3rem; padding: clamp(1.4rem, 2.6vw, 2rem); } /* Square, not round: --radius is 0 across the deck. Sized in CSS rather than with width/height attributes, matching the hero on title. */ [data-slide="team"] .team-photo { width: min(100%, 190px); aspect-ratio: 1; object-fit: cover; display: block; margin-bottom: 0.6rem; border: 1px solid var(--border); } [data-slide="team"] .team-card h3 { margin: 0; font-size: 1.15rem; font-weight: 500; } [data-slide="team"] .team-role { margin: 0; color: var(--accent); font-size: 0.9rem; } /* The cards centre their content vertically, so a founder whose line wraps and one whose line does not would sit at different heights and their photos would visibly fall out of step. Reserving two lines here keeps the cards equal however long either line runs, so the photos stay aligned as the copy gets edited. */ [data-slide="team"] .team-line { margin: 0; color: var(--fg-muted); font-size: 0.85rem; line-height: 1.45; max-width: 48ch; text-wrap: balance; min-height: calc(0.85rem * 1.45 * 2); } [data-slide="team"] .team-line.current { margin-top: 0.5rem; color: var(--fg); }