

.team__head { margin-bottom: clamp(40px, 5vw, 80px); }
.team__title { max-width: 12em; }

.lead { --lead-gap: clamp(32px, 3.6vw, 52px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--lead-gap); }
@supports (grid-template-rows: subgrid) {
  .lead { row-gap: 0; }
  .lead > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding-bottom: var(--lead-gap); }
}
.lead__ph { position: relative; width: 100%; align-self: start; aspect-ratio: 4 / 5; overflow: hidden; }
.lead__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.lead__n { font-weight: 500; font-size: var(--t-small); line-height: var(--lh-text); margin-top: 12px; }
.lead__r { font-size: var(--t-small); line-height: var(--lh-text); color: var(--fg2); margin-top: 3px; text-wrap: balance; }

.lead__ph--more { border: 1px solid var(--rule-2); display: flex; align-items: center; justify-content: center; }
.lead__ph--more span { font-weight: 500; font-size: var(--t-heading); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); }

.team__wide { margin-top: clamp(8px, 1.4vw, 24px); }
@supports not (grid-template-rows: subgrid) { .team__wide { margin-top: clamp(40px, 5vw, 76px); } }
.crew { columns: 3; column-gap: var(--gut); border-top: 1px solid var(--rule-2); }
.crew li { break-inside: avoid; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 10px 0 9px; border-bottom: 1px solid var(--rule); }
.crew .n { font-weight: 300; font-size: var(--t-small); line-height: var(--lh-text); }
.crew .t { font-size: var(--t-small); color: var(--fg2); text-align: right; line-height: var(--lh-text); }

@media (min-width: 1920px) {
  .lead { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .lead { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lead { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crew { columns: 2; }
}
@media (max-width: 640px) {
  .lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew { columns: 1; }

  .crew li { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 12px; row-gap: 2px; }
  .crew .t { margin-left: auto; }
}
