.text--4 {
  background-color: var(--clr-secondary-mid);
}

.text--4 .heading,
.text--4 .lead,
.text--4 .text {
  color: var(--clr-white);
}

.text--4 .eyebrow {
  color: var(--clr-primary);
}

@media (min-width: 992px) {
  .text--4 .component__heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
  }
  .text--4 .eyebrow,
  .text--4 .heading {
    grid-column: 1 / 2;
  }
  .text--4 .lead {
    grid-column: 2 / -1;
    grid-row: 1 / span 3;
    margin-block-start: 0;
  }
}

@media (min-width: 1200px) {
}

@media (min-width: 1587px) {
}