<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root {
  --slideshow-height: 100px;
  --slideshow-slide-width: 248px;
  --slideshow-count: 10;
  --slideshow-speed: 40s;
}

.slideshow {
  position: relative;
  width: 100%;
  height: var(--slideshow-height);
  margin: auto;
	background: transparent;
	overflow: hidden;
}

.slideshow::before,
.slideshow::after {
  content: "";
  position: absolute;
  width: 100px;
	height: calc(100% - 1px);
  background: linear-gradient(270deg, #1E1E1E 10%, rgba(30, 30, 30, 0.0001) 99.84%);
	z-index: 2;
}
	
.slideshow::after {
  right: 0;
  top: 0;
}

.slideshow::before {
  left: 0;
  top: 0;
  transform: rotateZ(180deg);
}
	
.slideshow .slideshow-track {
  width: calc(var(--slideshow-slide-width) * var(--slideshow-count) * 2);
  display: flex;
  animation: slideshowscroll var(--slideshow-speed) linear infinite;
}

.slideshow .slide {
  width: var(--slideshow-slide-width);
  height: var(--slideshow-height);
  box-sizing: border-box;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes slideshowscroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-1 * var(--slideshow-slide-width) * var(--slideshow-count)))}
}

@media (max-width: 767px) {
  .slideshow::before,
  .slideshow::after {
    width: 80px;
  }
}
</pre></body></html>