.text--2 {
  row-gap: 1rem;
  background-color: var(--clr-secondary-mid);
}

.text--2 .component__heading,
.text--2 .component__content {
  text-align: center;
}

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

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

@media (min-width: 992px) {
  .text--2 .component__heading {
    grid-column: 3 / 13;
  }
}

@media (min-width: 1200px) {
  .text--2 .component__heading {
    grid-column: 4 / 12;
  }
}

@media (min-width: 1587px) {
  .text--2 .component__heading {
    grid-column: 5 / 11;
  }
}