team-list {

	.intro {
		max-width: 45ch;
	}
	.portrait {
		position: relative;
		border-radius: var(--fill-corners);
		border: var(--border);
	}

	.item-list {
		display: grid;
		row-gap: 50px;
	}

	picture + h3 {
		margin-top: 0.5em;
	}

	/* Prior-company logos under each person. Each row sets `--logo-size`
	   inline (from the person's `logoSize` data field). Falls back to
	   12ch for any person without a logoSize set. */
	.prior {
		list-style: none;
		padding: 0;
		margin: 0.7em 0 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.6em 1em;

		li {
			display: flex;
			align-items: center;
			gap: 0.4em;
		}

		.logo {
			display: block;
			max-width: 7ch;

			/* Per-logo nudges — uses the slug-derived modifier class on
			   each <picture class='logo …'>. Tune width + vertical
			   alignment against adjacent text here. */
			&.meta { 
				margin-top: -0.4em;
			}
			&.apple { 
				margin-top: -0.7em;
			}
			&.bain { 
				max-width: 5ch;
				margin-top: -0.35em;
			}
			&.merrill-lynch { 
				max-width: 11ch;
				margin-top: -0.5em;
			}
			&.hulu { 
				max-width: 5ch;
				margin-top: -0.5em;
			}
			&.doximity { 
				max-width: 8ch;
				margin-top: -0.5em;
			}
		}
	}

	/* LinkedIn icon overlays the portrait bottom-left. team-only — no
	   counterpart in feature-grid. */
	.linkedin {
		position: absolute;
		bottom: 6px;
		right: 6px;
		display: inline-flex;
		padding: 12px;

		border-radius: 4px;
		color: #0a66c2;
		text-decoration: none;

		svg { 
			width: 22px; 
			height: 22px; 
		}
	}

	@media (width < 750px) {
		.item-list {
			margin-top: 50px;
		}

		article {
			max-width: 450px;
		}
	}

	@media (width >= 750px) {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		align-items: start;
		/* column-gap inherited from inner-column. */

		.intro {
			grid-column: 1 / -1;
		}

		.item-list {
			grid-template-columns: subgrid;

			grid-column: 1 / -1;

			margin-top: 40px;
		}

		.item {
			grid-column: span 6;
		}
	}

	@media (width >= 1200px) {
		.intro {
			grid-column: 1 / 4;

			position: sticky;
			top: 100px;

			padding-bottom: 260px;
			max-width: 28ch;
		}

		.item-list {
			grid-column: 4 / -1;
			margin-top: 10px;
		}

		.item {
			grid-column: span 4;
		}
	}
}