.js-scroll-trigger {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 1.2s;
}

.js-scroll-trigger.is-active {
  opacity: 1;
  transform: translate(0, 0);
}

.js-scroll-trigger-left {
  opacity: 0;
  transform: translate(-10vh, 0);
  transition: all 1.2s;
}

.js-scroll-trigger-left.is-active {
  opacity: 1;
  transform: translate(0, 0);
}

.js-scroll-trigger-right {
  opacity: 0;
  transform: translate(10vh, 0);
  transition: all 1.2s;
}

.js-scroll-trigger-right.is-active {
  opacity: 1;
  transform: translate(0, 0);
}

@media only screen and (max-width: 780px){
  .js-scroll-trigger,
  .js-scroll-trigger-left,
  .js-scroll-trigger-right {
    opacity: 0;
    transform: translate(0, 10vh);
    transition: all 1.2s;
  }
  
  .js-scroll-trigger.is-active,
  .js-scroll-trigger-left.is-active,
  .js-scroll-trigger-right.is-active {
    opacity: 1;
    transform: translate(0, 0);
  }
}