:root {
    --scroll-thumb-width: 40px;
}

/* 2D Art */

.main-frame-2d-art {
    position: relative;
    display: grid;
    border: var(--main-frame-border);
    border-image: var(--main-frame-border-image);
    box-shadow: var(--main-frame-shadow);
    grid-area: 2 / 2 / 6 / 9;
    grid-template-rows: 15% 85%;
    grid-template-columns: 2% 93% 1% 3% 1%;
    justify-items: center;
}

#scroll-area {
    position: relative;
    grid-area: 1/ 2/ 3/ 3;

    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: hidden;
    overflow-x: hidden;

    display: grid;
    justify-content: center;
    /* [Width Gallery] */
    width: 100%;
    padding-top: 2vw;
    padding-right: 1vw;
    padding-left: 1vw;

    grid-gap: 1vw;
    grid-template-columns: 50% 50%;

    /* Start Fade When Scroll. Bottom Stop Fade */
    --fade-start: 90%;
    --mask: linear-gradient(to bottom, black var(--fade-start), transparent 100%);


    -webkit-mask: var(--mask);
    mask: var(--mask);
}

#scroll-area img {
    object-fit: cover;
    width: 100%;
    cursor: zoom-in;
}

.gallery-post {
    position: relative;
}

.gallery-post img {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Gallery Hover Study */
.gallery-study {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    height: fit-content;
}

.gallery-post:hover .gallery-study {
    opacity: 1 !important;
}

/* ---- */

#scroll-area::after {
    content: "";
    flex-grow: 999;
}

/*Scroll Bar*/

.scroll-bar-container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 60%;
    top: 10%;
    grid-area: 2/ 4/ 3/ 5;
    justify-content: center;
}

.scroll-bar {
    position: absolute;
    display: flex;
    height: 80%;
    width: 45%;
    justify-content: center;
}

#scroll-bar-handle {
    position: absolute;
    top: 0%;
    width: 85%;
    aspect-ratio: 1/1;
    transform: translateY(-50%) rotate(45deg);
    border: 2px solid var(--text-color-light);
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: grab;
    z-index: 2;
    /* transition: all 0.01s linear; */
}

#scroll-bar-fill {
    position: absolute;
    top: 0;
    width: 10%;
    height: 100%;
    background-color: var(--text-color-light);
    z-index: -1;
}