@import url(../assets/css/style.css);

main {
  background-color: #fff8;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 130vh;
}

img {
  height: 350px;
  width: 450px;
}

.container {
  width: 450px;
  height: 350px;
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(1000px);
  animation: gallery 75s linear infinite;
  cursor: pointer;
}

.container span {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(calc((var(--i) * 60deg))) translateZ(400px);
  -webkit-box-reflect: below 2.5px
    linear-gradient(transparent, transparent, #fff8);
}

.container span img {
  position: absolute;
  border-radius: 10px;
  border: 6px ridge #ccc;
}

@keyframes gallery {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }

}