.slider {
  width: 100%;
  height: var(--height);
  overflow: hidden;
  position: relative;
}

.slider .slider-list {
  display: flex;
  width: 100%;
  height: auto;
  position: relative;
}

.slider .slider-item {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  animation: autoSlider 10s infinite ease-in-out;
}

.slider .slider-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@keyframes autoSlider {
  0% { transform: translateX(0); }
  45% { transform: translateX(0); }
  50% { transform: translateX(-100%); }
  95% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes ring {
  0% { transform: rotate(0deg); }
  1% { transform: rotate(10deg); }
  3% { transform: rotate(-10deg); }
  5% { transform: rotate(10deg); }
  7% { transform: rotate(-10deg); }
  9% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 10px #5cff33, 0 0 20px #47ff33, 0 0 30px #00ff1a;
  }
  50% {
    box-shadow: 0 0 15px #85ff66, 0 0 25px #99ff66, 0 0 35px #77ff00;
  }
}