.process-intro__item {

  &.is-active {

    & .process-intro__item-name {
      background-color: var(--_colors---coal);
      border: 0;

      & h4 {
        color: var(--_colors---sand);
      }
    }
  }
}

/* Inner wrapper fades in after Flip completes */
.process-intro__item-content-wrapper {
  will-change: opacity, transform;
  transform: translateZ(0);
}

/* Active states */

/* Reponsive  */

/* Flip process name text on tablet and above */
@media(min-width:992px) {

  .process-intro,
  .process-intro__list {
    overflow-anchor: none;
  }

  /* Keep labels steady (no inherited transitions) */
  .process-intro__item-name {
    transition: padding-bottom 0.3s cubic-bezier(0.83, 0, 0.17, 1);
  }

  .process-intro__item-heading {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    transform-origin: center center;
  }
}