.qf-carousel__item, .qf-carousel__mask {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}

.qf-carousel__item {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  z-index: 0;
  &.is-active {
    z-index: 2;
  }
  &.is-animating {
    transition: transform .4s ease-in-out;
  }
}

.qf-carousel__item--card {
  width: 50%;
  transition: transform .4s ease-in-out;
  &.is-in-stage {
    cursor: pointer;
    z-index: 1;
    &.is-hover .qf-carousel__mask, &:hover .qf-carousel__mask {
      opacity: 0.12;
    }
  }
  &.is-active {
    z-index: 2;
  }
}

.qf-carousel__mask {
  width: 100%;
  background-color: #fff;
  opacity: .24;
  transition: 0.2s;
}