@charset "UTF-8";

:root {
  --bg-color: #e8fff4;
  --duration: 10s;
  --carousel-width: 240px;
  --carousel-height: 140px;
  --carousel-translate-z: 400px;
  --carousel-rotate-deg: 40deg;
}
body{
  background-color: var(--bg-color);
}
.container {
  max-width: 1024px;
  margin: 50px auto;
  padding: 30px;
  color: var(--text-color);
  text-align: center;
}

/* CSS Nesting */
.carousel_wrap {
  position: relative;
  width: var(--carousel-width);
  height: var(--carousel-height);
  margin: 0 auto;
  perspective: 1000px;
  .carousel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: carousel var(--duration) infinite linear;
    transform-style: preserve-3d;
    &:hover {
      animation-play-state: paused;
    }
    .item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      &:nth-of-type(1){
        transform: rotateY(0deg) translateZ(var(--carousel-translate-z));
      }
      &:nth-of-type(2){
        transform: rotateY(var(--carousel-rotate-deg)) translateZ(var(--carousel-translate-z));
      }
      &:nth-of-type(3){
        transform: rotateY(calc(var(--carousel-rotate-deg) * 2)) translateZ(var(--carousel-translate-z));
      }
      &:nth-of-type(4){
        transform: rotateY(calc(var(--carousel-rotate-deg) * 3)) translateZ(var(--carousel-translate-z));
      }
      &:nth-of-type(5){
        transform: rotateY(calc(var(--carousel-rotate-deg) * 4)) translateZ(var(--carousel-translate-z));
      }
      &:nth-of-type(6){
        transform: rotateY(calc(var(--carousel-rotate-deg) * 5)) translateZ(var(--carousel-translate-z));
      }
      &:nth-of-type(7){
        transform: rotateY(calc(var(--carousel-rotate-deg) * 6)) translateZ(var(--carousel-translate-z));
      }
      &:nth-of-type(8){
        transform: rotateY(calc(var(--carousel-rotate-deg) * 7)) translateZ(var(--carousel-translate-z));
      }
      &:nth-of-type(9){
        transform: rotateY(calc(var(--carousel-rotate-deg) * 8)) translateZ(var(--carousel-translate-z));
      }
      &:nth-of-type(10){
        transform: rotateY(calc(var(--carousel-rotate-deg) * 9)) translateZ(var(--carousel-translate-z));
      }
      .img {
        transition: transform 0.3s ease-out;
        &:hover {
          transform: scale(1.5);
        }
      }
    }
  }
}
@keyframes carousel {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}