.wrappers{
  width: 100%;
  height: 50vh;
  display: flex;
  justify-content: right;
  align-items: center;
 z-index: 1000;
 position:absolute;
  
}

.wrappers .outer{
  display: flex;
  justify-content: right;
  align-items: center;
 
}

.wrappers .cards{
  background: transparent;
  width: 330px;
  display: flex;
  align-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  justify-content: space-between;
 
  animation: animate 15s linear infinite;
  animation-delay: calc(3s * var(--delay));
}

.wrappers .details-img{
  width: 320px;
  text-align: left;
}

.outer:hover .cards{
  animation-play-state: paused;
}

.wrappers .cards:last-child{
  animation-delay: calc(-3s * var(--delay));
}

@keyframes animate{
  0%{
      opacity: 0;
      transform: translateY(100%) scale(0.5);
  }5%, 20%{
      opacity: 0.4;
      transform: translateY(100%) scale(0.7);
  }25%, 40%{
      opacity: 1;
      transform: translateY(0%) scale(1);
      pointer-events: auto;
  }45%, 60%{
      opacity: 0.4;
      transform: translateY(-100%) scale(0.7);
  }65%, 100%{
      opacity: 0;
      transform: translatey(-100%) scale(0.5s);
  }
}


.cards .details{
  margin-left: 50px;
}

.cards a:hover{
  transition: scale(0.90);    
  }