.team {
  background:#eeece5;
}

.team h2 {
  font-size:clamp(38px,6vw,96px);
  line-height:1;
  letter-spacing:-.055em;
  margin:32px 0 60px;
}

.team-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:6vw;
}

.team-member {
  display:flex;
  gap:24px;
  border-top:1px solid #c9c6bc;
  padding:36px 0 48px;
  align-items:flex-start;
}

.team-number {
  font-size:11px;
  color:var(--orange);
  padding-top:10px;
}

.team-member h3 {
  font-size:clamp(24px,3vw,42px);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.2;
}

.team-member p {
  font-size:14px;
  color:#65635c;
  margin-top:12px;
}

@media(max-width:700px) {
  .team-grid {
    grid-template-columns:1fr;
  }
  .team h2 {
    margin-bottom:35px;
  }
  .team-member {
    padding:28px 0 34px;
    gap:20px;
  }
}

.team-grid {
  gap:40px 4vw;
}

.team-member {
  display:grid;
  grid-template-columns:22px 1fr;
  gap:18px;
  border-top:0;
  padding:0 0 28px;
}

.team-portrait {
  grid-column:1/-1;
  margin:0;
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#ddd9ce;
}

.team-portrait img {
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:auto;
  filter:grayscale(1);
  transition:filter .5s,transform .7s;
}

.team-member:hover img {
  filter:grayscale(0);
  transform:scale(1.035);
}

.team-portrait figcaption {
  position:absolute;
  bottom:12px;
  left:12px;
  background:#f5f3eedd;
  padding:7px 10px;
  font-size:9px;
  letter-spacing:.07em;
}

.team-member h3 {
  font-size:clamp(25px,3vw,40px);
}

@media(max-width:700px) {
  .team-portrait {
    aspect-ratio:1.2;
  }
  .team-grid {
    gap:30px;
  }
}