CSS Grid Team Section Generator

Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.

.team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px;
  grid-template-areas:
    "lead     lead"
    "person-a person-b"
    "person-c person-d";
}

.team > .lead { grid-area: lead; }
.team > .person-a { grid-area: person-a; }
.team > .person-b { grid-area: person-b; }
.team > .person-c { grid-area: person-c; }
.team > .person-d { grid-area: person-d; }

@media (min-width: 840px) {
  .team {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
    grid-template-areas:
      "lead lead person-a person-b"
      "lead lead person-c person-d";
  }
}