.hero-container{
    position: relative;
    width: 100%;
    height: 100%;
}

.container{
    position: fixed;
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

.gallery{
    position: absolute;
    top:22.5%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translateX(-50%) rotateX(55deg);
}

.item{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 60px;
    margin: 10px;
    transform-style: preserve-3d;
    background: transparent;
    animation: rotate 120s linear infinite;
}

@keyframes rotate{to{rotate: 360deg;}}

img{
    width: 100%;
    height: 100%;
    object-fit: contain;   
}

.item img:hover{cursor: pointer;}

.preview-img{
    position: fixed;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:300px;
    aspect-ratio: 4/3;
    z-index:0;
    -webkit-box-reflect: below 0 linear-gradient(transparent, rgba(255, 255, 255, 0.2));
}