#c-carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: rotation 20s infinite linear;
}

#c-carousel:hover {
  animation-play-state: paused;
}

#c-carousel figure {
  display: block;
  position: absolute;
  width: 90%;
  height: 50%px;
  left: 10px;
  top: 10px;
  background: black;
  overflow: hidden;
  border: solid 3px black;
}

#c-carousel figure img {
  width: 100%;
  height: auto;
}

#c-carousel figure:nth-child(1) {
  transform: rotateY(0deg) translateZ(288px);
}

#c-carousel figure:nth-child(2) {
  transform: rotateY(40deg) translateZ(288px);
}

#c-carousel figure:nth-child(3) {
  transform: rotateY(80deg) translateZ(288px);
}

#c-carousel figure:nth-child(4) {
  transform: rotateY(120deg) translateZ(288px);
}

#c-carousel figure:nth-child(5) {
  transform: rotateY(160deg) translateZ(288px);
}

#c-carousel figure:nth-child(6) {
  transform: rotateY(200deg) translateZ(288px);
}

#c-carousel figure:nth-child(7) {
  transform: rotateY(240deg) translateZ(288px);
}

#c-carousel figure:nth-child(8) {
  transform: rotateY(280deg) translateZ(288px);
}

#c-carousel figure:nth-child(9) {
  transform: rotateY(320deg) translateZ(288px);
}

#c-carousel figure img {
  height: 200px;
}


@keyframes rotation {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

.container1 {
  margin: 10% auto;
  margin-left: 30%;
  width: 200px;
  height: 140px;
  position: relative;
  perspective: 2000px;
}

@media screen and (max-width: 576px) {
  .container1 {
    margin: 4% auto;
    width: 200px;
    height: 140px;
    position: relative;
    perspective: 200000px;
  }

  .heading {
    margin-top: 60px;
  }
}

@media screen and (max-width: 996px) {
  .container1 {
    margin: 1% auto;
    margin-bottom: 15%;
    width: 200px;
    height: 140px;
    position: relative;
    perspective: 200000px;
  }

  .heading {
    margin-top: 60px;
  }
}