.box {
    overflow: visible;
    scroll-snap-align: center;
    display: flex;
    color: rgb(253, 250, 245);
    width: 60vw;
    height: 60vw;
    padding: 6vw;
    transition: height .2s ease-in-out, width .2s ease-in-out;
}

.enlargeBox {
    width: 80vw;
    height: 80vw;
}

.box > img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-shadow: 2px 1px 3px rgb(0 0 0 / .1);
    cursor: pointer;
}

.projectScroller {
    height: 70%;
    width: 100%;
    z-index: 50;
    /* position: absolute; */
    display: flex;
    align-items: center;
    overflow-x: scroll;
    /* scroll-snap-align: center; */
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    /* scrollbar-width: none; */
    pointer-events: none;
}

.projectScroller::-webkit-scrollbar {
    display: none;
    width: 1vw;
}
.projectScroller::-webkit-scrollbar-track {
    margin-block: 21vh;
    border-radius: 4px;
}
.projectScroller::-webkit-scrollbar-track:hover {
    background: rgba(253, 250, 245, 0.3);
}
.projectScroller::-webkit-scrollbar-thumb {
    background: rgba(253, 250, 245);
    margin-block: 21vh;
    border-radius: 4px;
}

.grey {
    filter: grayscale(100%);
}

.firstBox {
    margin-left: calc(50vw);
}

.lastBox {
    margin-right: calc(100% + 80vw);
}

.slideRightBack {
    animation: slideRightBack .2s ease-in-out;
}

.fadeIn {
    animation: fadeIn .4s ease-in-out;
    pointer-events: all;
}

.fadeOut {
    animation: fadeOut .4s ease-in-out;
}

@keyframes slideRightBack {
    0%{
        transform: translateX(0vw);
        opacity: 1;
    }
    100%{
        transform: translateX(100vw);
        opacity: .1;
    }
}

@keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes fadeOut {
    0%{
        opacity: 1;
    }
    80%{
        opacity: .5;
    }
    100%{
        opacity: 0;
    }
}

@media (min-aspect-ratio: 1.8/3){
    .projectScroller {
        height: 70%;
        width: 100%;
        z-index: 50;
        padding-bottom: 3vh;
    }
}

@media (min-aspect-ratio: 21/24){
    .projectScroller {
        height: 100%;
        width: 43.7%;
        margin-right: 5%;
        flex-direction: column;
        /* justify-content: center; */
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-scroll-snap-type: y mandatory;
        -ms-scroll-snap-type: y mandatory;
            scroll-snap-type: y mandatory;
    }

    .projectScroller::-webkit-scrollbar {
        display: block;
    }

    .box {
        width: 40vh;
        height: 40vh;
        margin-top: 0vh;
        margin-right: 0vw;
        margin-left: 0vw;
        padding: 5vh;
    }

    .firstBox {
        margin-top: calc(50vh);
        margin-right: 0vw;
        margin-left: 0vw;
        padding: 5vh;
    }

    .lastBox {
        margin-bottom: calc(50vh);
        margin-top: 0vh;
        margin-right: 0vw;
        margin-left: 0vw;
        padding: 5vh;
    }
}

@media (min-aspect-ratio: 4.8/3){
    .box {
        width: 60vh;
        height: 60vh;
        margin-top: 0vh;
        margin-right: 0vw;
        margin-left: 0vw;
        padding: 5vh;
    }

    .firstBox {
        margin-top: calc(50vh);
        margin-right: 0vw;
        margin-left: 0vw;
        padding: 5vh;
    }

    .lastBox {
        margin-bottom: calc(50vh);
        margin-top: 0vh;
        margin-right: 0vw;
        margin-left: 0vw;
        padding: 5vh;
    }
}