/* Efeito deslizando de cima */
@keyframes slidein-top {
  from {
      transform: translateY(-100%);
      opacity: 0;
  }
  to {
      transform: translateY(0%);
      opacity: 1;
  }
}

.slide-in-top {
  animation: slidein-top 0.4s ease forwards;
}

/* De baixo */
@keyframes slidein-bottom {
  from {
      transform: translateY(100%);
      opacity: 0;
  }
  to {
      transform: translateY(0%);
      opacity: 1;
  }
}

.slide-in-bottom {
  animation: slidein-bottom 0.4s ease forwards;
}

/* Da esquerda */
@keyframes slidein-left {
  from {
      transform: translateX(-100%);
      opacity: 0;
  }
  to {
      transform: translateX(0%);
      opacity: 1;
  }
}

.slide-in-left {
  animation: slidein-left 0.4s ease forwards;
}

/* Da direita */
@keyframes slidein-right {
  from {
      transform: translateX(100%);
      opacity: 0;
  }
  to {
      transform: translateX(0%);
      opacity: 1;
  }
}

.slide-in-right {
  animation: slidein-right 0.4s ease forwards;
}

/* Delay */
.slide-in-delay {
  animation-delay: 0.6s;
}

@media (min-width: 1024px) {
  /* Redefinindo a animação slide-in-right no desktop */
  .slide-in-right {
    animation-name: slidein-top; /* Vem de cima no desktop */
  }

  /* Redefinindo a animação slide-in-left no desktop */
  .slide-in-left {
    animation-name: slidein-bottom; /* Vem de baixo no desktop */
  }

  /* Redefinindo a animação slide-in-top no desktop */
  .slide-in-top {
    animation-name: slidein-left; /* Vem da esquerda no desktop */
  }

  /* Redefinindo a animação slide-in-bottom no desktop */
  .slide-in-bottom {
    animation-name: slidein-right; /* Vem da direita no desktop */
  }

  /* Caso queira aumentar o tempo no desktop */
  .slide-in-right,
  .slide-in-left,
  .slide-in-top,
  .slide-in-bottom {
    animation-duration: 0.6s;
  }
}