.scroller {
    height: 70%;
    z-index: 5;
    position: absolute;
    display: flex;
    align-items: center;
    overflow-x: scroll;
    overflow-y: hidden;
    overscroll-behavior: contain;
    /* scroll-snap-align: center; */
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    -ms-overflow-style: auto;
    /* scroll-width: none; */
    opacity: 0;
}

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

.scroller106 {
    width: 106.4%;
    left: -3.2%;
}

.scroller100 {
    width: 100%;
}

.slideRight {
    animation: slideRight .4s ease-in-out;
    opacity: 100%;
}

.scrollerOut {
    animation: scrollerOutS .4s ease-in-out;
    opacity: 100%
}

.visible {
    opacity: 100%;
}

@media (min-aspect-ratio: 1.8/3) {

}

@media (min-aspect-ratio: 21/24){
    .scroller {
        height: 100%;
        width: 40%;
        margin-right: 5%;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-scroll-snap-type: y mandatory;
        -ms-scroll-snap-type: y mandatory;
            scroll-snap-type: y mandatory;
        /* scrollbar-width: 10px; */
    }
    .scroller::-webkit-scrollbar {
        display: block;
    }
    .scroller106 {
        width: 40%;
        left: auto;
        right: 0px;
    }
    .scroller100 {
        width: 40%;
        left: auto;
        right: 0px;
    }
    .slideRight {
        animation: slideUp .4s ease-in-out;
        }
    .scrollerOut {
        animation: scrollerOutB .4s ease-in-out;
    }
}

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

@keyframes slideUp {
    0%{
        transform: translateY(100vh);
        opacity: .1;
    }
    100%{
        transform: translateY(0vh);
        opacity: 1;
    }
}

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

@keyframes scrollerOutB {
    0%{
        transform: translateY(0vh);
        opacity: .6;
    }
    100%{
        transform: translateY(100vh);
        opacity: 1;
    }
}