.slideshow {
  position: relative;
  width: clamp(270px, 60vw, 600px);
  height: clamp(210px, 65vh, 450px);
  margin: 8rem auto;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.slideshow .slide {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: start;
  align-items: start;
  transform: scale(-1, 1);
  rotate: y 90deg;
  transform-style: preserve-3d;
  animation: animate 60s cubic-bezier(0, 0.48, 1, 0.52) infinite;
  animation-delay: calc(var(--i) * 5s);
}
@keyframes animate {
  0% {
    rotate: y 90deg;
  }
  8.33%,
  100% {
    rotate: y 270deg;
  }
}
.slideshow .slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 48px;
}
.slideshow .slide h2 {
  position: relative;
  top: -10%;
  left: 100px;
  width: 200%;
  padding: 1.1rem;
  font-size: 2.2rem;
  font-weight: 800;
  border-radius: 11px;
  color: var(--color-font);
  text-shadow: 0 0 3px var(--color-white), 0 0 8px var(--color-white);
  transform: scale(-1, 1) translateY(100px) translateZ(50px);
  rotate: y 180deg;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: text-slide 60s linear infinite;
  animation-delay: calc(var(--i) * 5s);
}
@keyframes text-slide {
  0% {
    left: 100px;
  }
  8.33%,
  100% {
    left: -100px;
  }
}
.slideshow .slide span {
  display: block;
  position: relative;
  top: 80%;
  left: -100px;
  padding: 0.1rem;
  font-size: 1.3rem;
  font-weight: 800;
  transform: translateZ(50px);
  backface-visibility: hidden;
  animation: text-slide_reverse 60s linear infinite;
  animation-delay: calc(var(--i) * 5s);
}
@keyframes text-slide_reverse {
  0% {
    left: -100px;
  }
  8.33%,
  100% {
    left: 200px;
  }
}