:root {
	--marquee-width: 100%;
	--marquee-height: 20vh;
	/* --marquee-elements: 12; */
	/* defined with JavaScript */
	--marquee-elements-displayed: 3;
	--marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
	--marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

.marquee {
	width: var(--marquee-width);
	/*height: var(--marquee-height);*/
	background-color: #7cd47e;
	overflow: hidden;
	position: relative;
}

.marquee:before,
.marquee:after {
	position: absolute;
	top: 0;
	width: 10rem;
	height: 100%;
	content: "";
	z-index: 1;
}

.marquee:before {
	left: 0;
	background: linear-gradient(to right, #7cd47e 0%, transparent 100%);
}

.marquee:after {
	right: 0;
	background: linear-gradient(to left, #7cd47e 0%, transparent 100%);
}

.marquee-content {
	list-style: none;
	height: 100%;
	display: flex;
	animation: scrolling var(--marquee-animation-duration) linear infinite;
}

/* .marquee-content:hover {
  animation-play-state: paused;
} */
@keyframes scrolling {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
	}
}

.marquee-content li {
	display: flex;
	justify-content: center;
	align-items: center;
	/* text-align: center; */
	flex-shrink: 0;
	width: var(--marquee-element-width);
	max-height: 100%;
	font-size: calc(var(--marquee-height)*3/4);
	/* 5rem; */
	white-space: nowrap;
}

.marquee-content li img {
	width: 100%;
	padding-left: 5px;
	padding-right: 5px;
	/* height: 100%; */
	/*border: 2px solid #eee;*/
}

@media (max-width: 600px) {
	:root {
		/*--marquee-width: 100vw;*/
		/*--marquee-height: 16vh;*/
		--marquee-elements-displayed: 1;
	}

	.marquee:before,
	.marquee:after {
		width: 5rem;
	}
}