.textmedia--4 {
  position: relative;
  row-gap: 1rem;
  background: var(--clr-secondary-80);
  background: var(--clr-gradient-secondary-70);
}

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

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

.textmedia--4 .heading,
.textmedia--4 .lead,
.textmedia--4 .textmedia__text {
  color: var(--clr-white);
}
.textmedia--4 .component__content {
  display: grid;
  grid-template-columns: subgrid;
  gap: 2rem;
}

.textmedia--4 .textmedia__text {
  hyphens: auto;
}

.textmedia--4 .textmedia__text > * + * {
  margin-top: 1em;
}

.textmedia--4 .textmedia__media,
.textmedia--4 .textmedia__text {
  grid-column: 1 / -1;
}

.textmedia--4 .textmedia__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.textmedia--4 .textmedia__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 600ms ease;
}

.textmedia--4:hover .textmedia__image {
  transform: scale(1.2);
}

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

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

@media (min-width: 1587px) {
  .textmedia--4 .component__heading {
    grid-column: 5 / 11;
  }
  .textmedia--4 .component__content {
    grid-column: 4 / 12;
  }
}