:root {
    --animationSpeed: 40s;
    --qtdElementos: 9;
}

/* Animation */
@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-250px * 7))}
}

/* Styling */
.slider {
	height: 100px;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	
	&::before,
	&::after {
        background: linear-gradient(to right,  rgba(242,242,242,1) 0%,rgba(242,242,242,0) 100%);
		content: "";
		height: 100px;
		position: absolute;
		width: 200px;
		z-index: 2;
	}
	
	&::after {
		right: 0;
		top: 0;
		transform: rotateZ(180deg);
	}

	&::before {
		left: 0;
		top: 0;
	}
	
	.slide-track {
		animation: scroll var(--animationSpeed) linear infinite;
		display: flex;
		width: calc(250px * var(--qtdElementos));
	}
	
	.slide {
		height: 100px;
		width: 250px;
        padding-left: 50px;
	}
}
.slider h2 {
    color: var(--preto);
}