.gallery-contents{
    display:grid;
    grid-template-columns: 1fr 1fr;
    height:100vh;
    overflow: hidden;
}
.gallery{
    /* --scroll:0; */
    --center:50vw;
    position: relative;
    display: flex;
    flex-direction: column ;
    align-items: center;
    margin:auto;
    transform: translateY(calc(var(--scroll) * 1px));
    width:100%;
    height:fit-content;
}
.gallery-item{
    background-color: var(--secondaryColor1);
    border:1px solid black;
    position: relative;
    --n:0;
    --pos: calc(var(--scroll) * 1px + 24vw * var(--n) - 50vh + 12vw); 
    /* calculate how close to center i am. */
    --opacity: calc(var(--scroll) + 24 * var(--vw) * var(--n) - 50 * var(--vh) + 12 * var(--vw));  
    /* transform: perspective(500px) translateZ(calc(- var(--pos) * var(--pos))); */
    transform: perspective(1200px) translateZ(calc(min(var(--pos), -1*var(--pos)))) translateY(calc(-0.5 * var(--pos)));
    opacity: max(0.5,calc(1 - max(var(--opacity), -1*var(--opacity)) / 500));
    z-index: calc(500 - max(var(--opacity), -1*var(--opacity)));
    width:40vw !important;
    aspect-ratio: 5/3;
    -webkit-user-drag: none;
    user-drag: none;
    box-shadow: 0 0 0.5em rgba(255,255,255,0.7);
}

.gallery-details{

    position: relative;
    width:100%;
    height:100vh;
    margin:auto;
    margin-top:1em;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    gap:1em;
    padding: 1em;
    box-sizing: border-box;
    animation-name:fadeInInfo;
    animation-duration: 0.3s;

}

.gallery-details *{
    text-align: center;
    margin:0;
    -webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
    color:var(--text-color3);

}

.gallery-title{
    color:var(--text-color1);
    font-size: 2.5rem;
}
.gallery-authors{
    color:rgba(125,144,164,0.85);
    font-size: 1.5rem;
}

.gallery-background{
    display:none;
    background: black;
    z-index: 450;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    transform: translateY(calc(var(--scroll) * -1px));
    animation: fade-in-bg 1s forwards;

}

.gallery-description{
    font-size: 2rem;
    color:var(--text-color3);
}

.gallery-visit{
    /* box-shadow: 0 0 0.5em 0.1em #C7E2FF; */
    width:fit-content;
    padding: 0.1em 5em;
}

.gallery-visit > *{
    font-size: 2.5rem !important;
}
.fadeOutInfo{
    animation-name:fadeOutInfo;
}
@keyframes fade-in-bg {
    0%{
        opacity:0;
    }
    100%{
        opacity:0.3;
    }
}
@keyframes fadeOutInfo{
    0%{
        opacity:1;
        transform: translateY(0);
    }
    100%{
        opacity:0;
        transform: translateY(-1em);
    }
}
@keyframes fadeInInfo{
    0%{
        opacity:0;
        transform: translateY(-1em);
    }
    100%{
        opacity:1;
        transform: translateY(0);
    }

}
.member_projects{
    margin-top:3em;
}