.to-[#776fff] {
  background-color: #2aa0bf
}
.from-[#ff4694] {
  background-color: #087acd
}

section div {
  opacity: 0;
  visibility: hidden;
}

section div[data-index="0"] {
  animation: fadeIn 4s linear 2s forwards;
}

section div[data-index="1"] {
  animation: fadeIn 4s linear 6s forwards;
}

section div[data-index="2"] {
  animation: fadeIn 4s linear 10s forwards;
}

section div[data-index="3"] {
  animation: fadeInLast 4s linear 14s forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; visibility: visible; }
  25% { opacity: 1; visibility: visible; }
  75% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: visible; }
}

@keyframes fadeInLast {
  0% { opacity: 0; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}

.scope {
  position: relative;
  width: 150px;
  height: 200px;
  transform-style: preserve-3d;
  animation: slid 60s linear infinite;
}

.image {
  position: absolute;
  top: 12.5%;
  left: 0;
  width: 100%;
  height: 75%;
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform 2s;
}

.image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

@keyframes slid {
  0% {
      transform: perspective(1000px) rotateY(0deg);
  }
  100% {
      transform: perspective(1000px) rotateY(360deg);
  }
}