.team { display: grid; gap: 1.6rem; margin-top: 1.6rem; max-width: 44rem; }
.lid { display: grid; grid-template-columns: 96px 1fr; column-gap: 1.2rem; align-items: start; }
.lid > svg { grid-row: 1 / span 4; width: 88px !important; height: 88px !important; margin: 0 !important; }
.lid h3 { margin: 0; font-size: 1.3rem; display: inline; }
.lid .functie { font-weight: 700; color: var(--inkt-zacht); margin: .1rem 0 .3rem; }
.lid .soort { justify-self: start; font-size: .8rem; font-weight: 700; padding: .05rem .55rem; border: 1.5px solid var(--inkt); border-radius: 999px; background: var(--lila); margin-bottom: .35rem; }
.lid .soort.mens { background: var(--salie); }
.lid p { margin: 0; }
@media (max-width: 480px) { .lid { grid-template-columns: 72px 1fr; column-gap: .9rem; } .lid > svg { width: 68px !important; height: 68px !important; } }
.lid .mail { margin-top: .3rem; font-size: .95rem; }
/* one calm tinted area per member, keeping their details together (no border, no shadow) */
.team { gap: 1rem; }
.lid { padding: 1.1rem 1.3rem; border-radius: 18px; background: #fbf4e0; }
.lid:nth-child(4n+2) { background: #fcece2; }
.lid:nth-child(4n+3) { background: #e8f0f7; }
.lid:nth-child(4n+4) { background: #e8f1e5; }
.lid > svg { grid-row: 1 / span 6; }
.lid > :not(svg) { grid-column: 2; }
/* a tag never has the colour of the area it sits on */
.lid .soort { background: var(--papier); }
.lid .soort.mens { background: var(--salie); }
/* the address at the top right of each member's area; under the text on a phone */
.lid { position: relative; }
.lid .mail { position: absolute; top: 1.15rem; right: 1.3rem; margin: 0; font-size: .92rem; }
@media (max-width: 600px) { .lid .mail { position: static; margin-top: .3rem; } }
/* the tag right after the name, on the same line */
.lid h3 .soort { display: inline-block; vertical-align: .2em; margin: 0 0 0 .5rem; font-size: .72rem; }
/* name with the address under it; the tag at the top right */
.lid .mail { position: static !important; margin: .1rem 0 .1rem !important; font-size: .95rem; }
.lid > .soort { position: absolute; top: 1.1rem; right: 1.2rem; margin: 0; }
.lid h3 { padding-right: 5rem; }
/* two members per row when the screen has room (Floris, 03-10-2026); the tints then never repeat side by side or above */
@media (min-width: 900px) { .team { grid-template-columns: 1fr 1fr; max-width: none; } }