.air {
  display: grid;
  gap: var(--space-xx-large);
  justify-self: center;
  max-width: 46em;
  padding-inline: var(--space-large);
  width: 100%;
}

.air__lede {
  font-style: italic;
  text-align: center;
  text-wrap: pretty;
}

.air__lede strong {
  color: var(--color-terminal-white);
}



.air__section {
  display: grid;
  gap: var(--space-neutral);
}

/* Rule between sections only, never under the lede — same as /teams. */
.air__section + .air__section {
  border-top: var(--border-width) solid rgba(var(--rgb-terminal-black), 0.8);
  padding-top: var(--space-xx-large);
}

.air__section h2 {
  color: var(--color-terminal-white);
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: 0.075em;
  text-align: center;
  text-transform: uppercase;
}

.air__section p {
  text-wrap: pretty;
}

.air__perks {
  display: grid;
  gap: var(--space-medium);
}

.air__perks li {
  display: grid;
  gap: var(--space-medium);
  grid-template-columns: 1em 1fr;
}

.air__perks li::before {
  color: rgba(var(--rgb-terminal-white), 0.5);
  content: "›";
}

.air__perks strong {
  color: var(--color-terminal-white);
}



/* ::before plus one <span> — without the span, every text node around the
   <strong> becomes its own grid cell and the line wraps one word per row. */
.air__perks li > span {
  display: block;
}



/* Same circular portrait as the team pages, with room for a paragraph. */
.resident {
  display: grid;
  gap: var(--space-medium);
  justify-items: center;
  text-align: center;
}

.resident + .resident {
  margin-top: var(--space-large);
}

.resident__avatar {
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--border-width) rgba(var(--rgb-terminal-black), 0.8);
  width: 8em;
}

.resident__name {
  font-size: var(--font-size-medium);
}

.resident__meta {
  color: rgba(var(--rgb-terminal-white), 0.6);
  font-size: var(--font-size-small);
  margin-top: calc(var(--space-medium) * -0.5);
}



.air__note {
  color: rgba(var(--rgb-terminal-white), 0.6);
  font-style: italic;
  /* Same step as between the resident blocks above it. */
  margin-top: var(--space-large);
  text-align: center;
}



@media(min-width: 64em) {

  .air {
    padding-inline: var(--space-xx-large);
  }

}