.galleryContainer{
    margin:0;
    height:100vh;
    display:grid;
    place-items:center;
    background-color:#010101;
  }

.gallery{
    position:relative;
    width:300px;
    height:200px;
    transform-style:preserve-3d;
    animation:rotate 35s linear infinite;
  }
  
  @keyframes rotate{
    from{
      transform:perspective(1200px) rotateY(0deg);
    }
    
    to{
      transform:perspective(1200px) rotateY(360deg);
    }
  }
  
  .gallery span{
    position:absolute;
    width:100%;
    height:100%;
    transform-origin:center;
    transform-style:preserve-3d;
    transform:rotateY(calc(var(--i) * 45deg)) translateZ(380px);
  }
  
  .gallery span img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
  }

@media only screen and (max-width: 850px) {
    
    @keyframes rotate{
      from{
        transform:perspective(1200px) rotateX(0deg);
      }
      
      to{
        transform:perspective(1200px) rotateX(360deg);
      }
    }

    .gallery span{
      transform:rotateX(calc(var(--i) * 45deg)) translateZ(380px);
    }
}

@media only screen and (max-width: 450px) {
  .gallery{
    width:250px;
    height:200px;
  }
}

@media only screen and (max-width: 360px) {
  .gallery{
    width:200px;
    height:150px;
  }
}