.flip {
  position: relative;
  .flip-text {
    white-space: nowrap;
    overflow: hidden;
    line-height: 1;
    span {
      display: inline-block;
      position: relative;
      top: 0.07em;
      transition: transform 1s var(--curve);
      &.space {
        padding-right: 0.25em;
      }
    }
    &:nth-child(2) {
      position: absolute;
    }
  }
  &:not(:hover) {
    .flip-text {
      &:nth-child(2) {
        span {
          transform: translateY(110%);
        }
      }
    }
  }
  &:hover {
    .flip-text {
      &:nth-child(1) {
        span {
          transform: translateY(-110%);
        }
      }
      &:nth-child(2) {
        span {
          transform: translateY(0);
        }
      }
    }
  }
}