/* 
LIST
*/
body[data-template="home"] #projects-list {transform: translateX(0);}
body[data-template="project"] #projects-list {transform: translateX(-100vw);}
@media only screen and (min-width: 1200px) {
    body[data-template="project"] #projects-list {transform: translateX(0);}
}

#projects-list {
    min-height: fit-content;
    flex-direction: column;
    padding: calc(var(--header_m-height) - 1rem) 0 var(--marquee-height);
}
#projects-list--hide {flex-grow: 1;}
@media only screen and (min-width: 768px) {
    #projects-list {
        flex-direction: row;
        padding: calc(var(--header_t-height) - 1rem) 0 var(--marquee-height);
    }
}
@media only screen and (min-width: 1200px) {
    #projects-list {
        position: fixed;
        top: 0;
        right: 0;
        bottom: var(--marquee-height);
        left: 50vw;
        min-height: calc(100vh - var(--marquee-height));
        max-height: calc(100vh - var(--marquee-height));
        flex-direction: column;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

.project-block {
    min-width: 100%;
    max-width: 100%;
    height: fit-content;
}
@media only screen and (min-width: 768px) {
    .project-block {
        min-width: 50%;
        max-width: 50%;
    }
}
@media only screen and (min-width: 1200px) {
    .project-block {
        min-width: 100%;
        max-width: 100%;
        min-height: fit-content;
        max-height: fit-content;
    }
}
.project-block[data-status='active'] {background: var(--color);}
.project-block[data-status='active'] p,
.project-block[data-status='active'] h2 {color: var(--t-color);}
@media only screen and (min-width: 1200px) {
    .project-block[data-status='active'] {
        position: sticky;
        top: 0;
        z-index: 10;
    }
}

@media (hover: hover) {
    .project-block:hover {background: var(--color);}
    .project-block:hover p,
    .project-block:hover h2 {color: var(--t-color);}
}

.project-block--thumb {margin: 0 -1rem .4rem; min-width: 100vw; max-width: 100vw;}
@media only screen and (min-width: 768px) {
    .project-block--thumb {margin: 0 -1rem .4rem; min-width: 50vw; max-width: 50vw;}
}

.project-block--button {
    top: 1rem;
    right: 1rem;
    transition: transform ease-out 500ms;
}
.project-block[data-status='deactive'] .project-block--button {transform: translateY(calc(-100% - 1.5rem));}
.project-block[data-status='active'] .project-block--button {transform: translateY(0);}


/* 
THUMBNAIL
*/
#projects-thumbnail {
    right: 50vw;
    z-index: 20;
}
#projects-thumbnail[data-status='hide'] {translate: -50vw 0;}