.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s ease-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.no-sliding) .slide-enter,
  html:not(.no-sliding) .slide-enter-content > * {
    --enter-step: 60ms;
    --enter-initial: 0ms;
    animation: slide-enter 1s both 1;
    animation-delay: calc(var(--enter-stage) * var(--enter-step));
  }

  .slide-enter-content > *:nth-child(1) {
    --enter-stage: 1 !important;
  }
  .slide-enter-content > *:nth-child(2) {
    --enter-stage: 2 !important;
  }
  .slide-enter-content > *:nth-child(3) {
    --enter-stage: 3 !important;
  }
  .slide-enter-content > *:nth-child(4) {
    --enter-stage: 4 !important;
  }
  .slide-enter-content > *:nth-child(5) {
    --enter-stage: 5 !important;
  }
  .slide-enter-content > *:nth-child(6) {
    --enter-stage: 6 !important;
  }
  .slide-enter-content > *:nth-child(7) {
    --enter-stage: 7 !important;
  }
  .slide-enter-content > *:nth-child(8) {
    --enter-stage: 8 !important;
  }
  .slide-enter-content > *:nth-child(9) {
    --enter-stage: 9 !important;
  }
  .slide-enter-content > *:nth-child(10) {
    --enter-stage: 10 !important;
  }
  .slide-enter-content > *:nth-child(11) {
    --enter-stage: 11 !important;
  }
  .slide-enter-content > *:nth-child(12) {
    --enter-stage: 12 !important;
  }
  .slide-enter-content > *:nth-child(13) {
    --enter-stage: 13 !important;
  }
  .slide-enter-content > *:nth-child(14) {
    --enter-stage: 14 !important;
  }
  .slide-enter-content > *:nth-child(15) {
    --enter-stage: 15 !important;
  }
  .slide-enter-content > *:nth-child(16) {
    --enter-stage: 16 !important;
  }
  .slide-enter-content > *:nth-child(17) {
    --enter-stage: 17 !important;
  }
  .slide-enter-content > *:nth-child(18) {
    --enter-stage: 18 !important;
  }
  .slide-enter-content > *:nth-child(19) {
    --enter-stage: 19 !important;
  }
  .slide-enter-content > *:nth-child(20) {
    --enter-stage: 20 !important;
  }
}