.team-member {
  container: team-member-container / inline-size;

  inner-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--sp-20);

    h1 {
      grid-column: span 12;;
    }

    >ul {
      grid-column: span 12;
    }

    >picture {
      grid-column: span 3;
    }

    member-content {
      grid-column: span 12;
      border-block-start: var(--border);
      padding-block-start: var(--sp-40);
      margin-block-start: var(--sp-40);

      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--sp-20);

      member-info {
        grid-column: span 3;;
      }

      member-bio {
        display: block;
        grid-column: 4 / span 9;
        max-width: var(--sp-680);

        p+p {
          margin-block-start: var(--sp-20);
        }

        a {
          color: var(--black-tint-14);
        }
      }
    }

    @container (inline-size < 43.75rem) {
      >picture {
        grid-column: span 12;
        max-width: var(--sp-330);
      }

      member-content {
        member-info,
        member-bio {
          grid-column: span 12;
        }
      }
    }
  }
}