body {
	min-height: 100vh;
	
	place-items:  center;
}

.slider {
	height: 250px;
	margin: auto;
	position: 90%;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.slide-track{
	display: flex;
	width: calc(250px * 9);
	animation: scroll 40s linear infinite;
}

.slide-track: hover {
	animation-play-state: paused;
}

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

.slide{
	height: 200px;
	width: 250px;
	display: flex;
	align-items: center;
	padding:  15px;
	perspective: 100px;
}

img{
	width: 100%;
	transition: transform 1s;
}

img:hover {
	transform: translateZ(20px);
}

.slider::before,
.slider::after {
	

	content: '';
	height: 100%;
	position: absolute;
	width: 15%;
	z-index: 2;
}

.slider::before {
	left: 0;
	top: 0;
}

.slider::after {
	right: 0;
	top:  0;
	transform: rotateZ(180deg);
}