.scope li {
	list-style: none;
}

@media (min-width: 768px) {
.scope {
	margin:0 auto;
	position: relative;
	width: 240px;
	height: 250px;
	transform-style: preserve-3d;
	animation: slid 70s linear infinite;
  }
  
  .scope li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: center;
	transform-style: preserve-3d;
	transform: rotateY(calc(var(--i) * 45deg)) translateZ(300px);
  }
  .scope li img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	object-fit: cover;
	transition: 10s;
  }
  .scope li:hover img {
	transform: translateY(-50px) scale(1.7);
  }
  @keyframes slid {
	0% {
	  transform: perspective(1000px) rotateY(0deg);
	}
	100% {
	  transform: perspective(1000px) rotateY(360deg);
	}
  }
}




  @media (max-width: 768px) {
.scope {
 margin-top:0 !important; 
 margin-bottom:0 !important;  
}
.cope {
	width: 100%;
    height: auto;
	/*margin:50px auto 0;*/
	overflow: hidden;
	
}

.cope ul {
	display: flex;
	padding: 0;
	width: 1200%;
	animation: slide 40s infinite alternate ease-in-out;
}

.cope li {
	width: 100%;
	list-style: none;
}

.cope img {
	width: 85%;
}

@keyframes slide {
	0% {margin-left: 0;}
	5% {margin-left: 0;}

	10% {margin-left: -120%;}
	15% {margin-left: -120%;}
	
	20% {margin-left: -240%;}
	25% {margin-left: -240%;}
	
	30% {margin-left: -360%;}
	35% {margin-left: -360%;}
	
	40% {margin-left: -480%;}
	45% {margin-left: -480%;}

	50% {margin-left: -600%;}
	55% {margin-left: -600%;}

	60% {margin-left: -720%;}
	65% {margin-left: -720%;}
	
	70% {margin-left: -840%;}
	75% {margin-left: -840%;}
	
	80% {margin-left: -960%;}
	85% {margin-left: -960%;}
	
	90% {margin-left: -1080%;}
	100% {margin-left: -1080%;}

	
}
  }