/* Half-width columns and generous space, inspired by SDL's welcome block. */
.home-introduction {
  --intro-size: clamp(32px, 2.5vw, 42px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  align-items: start;
  max-width: none;
  padding-inline: clamp(24px, 4.65vw, 67px);
  padding-block: clamp(88px, 6.5vw, 132px);
  background: var(--paper);
}

.home-introduction-title {
  margin: 0;
  font-size: var(--intro-size);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.home-introduction-name,
.home-introduction-role {
  display: block;
}

.home-introduction-identity {
  min-width: 0;
}

.home-introduction-copy {
  min-width: 0;
  color: #242424;
  font-size: var(--intro-size);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.025em;
  text-wrap: pretty;
}

.home-introduction-copy p + p {
  margin-top: 1em;
}

.home-introduction + .work {
  padding-top: 0;
}

@media (max-width: 900px) {
  .home-introduction {
    --intro-size: clamp(26px, 4vw, 32px);
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    padding-inline: var(--gutter);
    padding-block: 64px;
  }

  .home-introduction-copy {
    max-width: 44em;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.5;
  }

  .home-introduction + .work {
    padding-top: 0;
  }
}

@media (max-width: 560px) {
  .home-introduction {
    --intro-size: 24px;
    padding-block: 48px 56px;
    row-gap: 28px;
  }
}