.text--1 {
  background-color: var(--clr-white);
}

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

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

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

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