@keyframes toggleFavHeart {
  0%, 20% {
    color: #d01d35;
    transform: scale(1.2);
  }
  100% {
    color: #d01d35;
    transform: scale(1);
  }
}

@keyframes fadeInBg {
  from {
    opacity: 0;
  }
  to {
    opacity: 33%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 100%;
  }
}

@keyframes fadeOut {
  from {
    opacity: 100%;
  }
  to {
    opacity: 0;
  }
}

@keyframes fromBottom {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideFromLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes paneBgAround {
  0% {
    background-position: -10vw 0%;
  }
  50% {
    background-position: -20vw 0%;
  }
  100% {
    background-position: -10vw 0%;
  }
}

.fade-in-children {
  @for $i from 1 through 10 {
    :nth-child(#{$i}) {
      opacity: 0;
      animation: fadeIn 1.5s ease-in-out 1s 1 forwards, fromBottom 1.5s ease-in-out 1s 1 forwards;
      animation-delay: 0.25s + $i * 0.25s;
    }
  }
}