@media only screen and (max-width: 600px) {
    /* For mobile phones: */
  
    .icon-cards {
  
        width: 119px;
        height: 120px;
        margin-top: 30px;
        margin-left: 186px;
        margin-right: auto;
        -webkit-perspective: 800px;
        perspective: 800px;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
    
  }
  
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 600px) {
  
    .icon-cards {
  
        width: 110px;
        height: 120px;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
        -webkit-perspective: 800px;
        perspective: 800px;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
   
  
  }


.icon-cards__content {
	
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
}
.icon-cards__item {
	position: absolute;
	top: 0;
	left: 0;
	width: 190px;
	height: 210px;
	border-radius: 6px;
}
.icon-cards__item:nth-child(1) {
	background: rgba(252, 192, 77, 0.9);
	transform: rotateY(0) translateZ(182px);
}
.icon-cards__item:nth-child(2) {
	background: rgba(49, 192, 204, 0.9);
	transform: rotateY(120deg) translateZ(182px);
}
.icon-cards__item:nth-child(3) {
	background: rgba(236, 233, 242, 0.9);
	transform: rotateY(240deg) translateZ(182px);
}





@keyframes carousel {
  0%,  17.5% {
      -webkit-transform: translateZ(-182px) rotateY(0);
      transform: translateZ(-182px) rotateY(0);
  }
  27.5%, 45% {
      -webkit-transform: translateZ(-182px) rotateY(-120deg);
      transform: translateZ(-182px) rotateY(-120deg);
  }
  55%, 72.5% {
      -webkit-transform: translateZ(-182px) rotateY(-240deg);
      transform: translateZ(-182px) rotateY(-240deg);
  }
  82.5%, 100% {
      -webkit-transform: translateZ(-182px) rotateY(-360deg);
      transform: translateZ(-182px) rotateY(-360deg);
  }
}