.carousel-wrapper {
	 width: 520px;
	 height: 350px;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 box-shadow: 5px 5px 25px 0px rgba(46, 61, 73, 0.2);
	 border-radius: 20px;
	 margin: 100px auto 20px;
}
 .carousel-container {
	 width: 400px;
	 height: 250px;
	 overflow: hidden;
	 margin: 0 auto;
}
 .carousel {
	 display: flex;
	 width: 1200px;
	 animation: sliding 12s infinite;
}
 .carousel div {
	 width: 400px;
	 height: 250px;
	 background-size: cover;
	 background-position: center;
}
 .carousel:hover {
	 animation-play-state: paused;
}
 .carousel .image-one {
	 background-image: url("../img/configurator.webp");
}
 .carousel .image-two {
	 background-image: url("../img/exploration.webp");
}
 .carousel .image-three {
	 background-image: url("../img/studio.webp");
}
 @keyframes sliding {
	 30% {
		 transform: translateX(0);
	}
	 35% {
		 transform: translateX(-400px);
	}
	 65% {
		 transform: translateX(-400px);
	}
	 70% {
		 transform: translateX(-800px);
	}
	 98% {
		 transform: translateX(-800px);
	}
	 100% {
		 transform: translateX(0);
	}
}
 @media screen and (max-width: 768px) {
	 .carousel-wrapper {
		 width: 312px;
		 height: 210px;
	}
	 .carousel-container {
		 width: 240px;
		 height: 150px;
	}
	 .carousel {
		 width: 720px;
	}
	 .carousel > div {
		 width: 240px;
		 height: 150px;
	}
	 @keyframes sliding {
		 30% {
			 transform: translateX(0);
		}
		 35% {
			 transform: translateX(-240px);
		}
		 65% {
			 transform: translateX(-240px);
		}
		 70% {
			 transform: translateX(-480px);
		}
		 98% {
			 transform: translateX(-480px);
		}
		 100% {
			 transform: translateX(0);
		}
	}
}
 