/* 
LIST
*/
#architects_p-list {grid-column: 1/-1;}

.architects_p-list--group .--letter {
    top: var(--header-m);
    align-self: self-start;
    min-width: 2rem;
    max-width: 2rem;
    background: white;
    padding: 2px 0;
    z-index: 5;
}
@media only screen and (min-width: 768px) {
    .architects_p-list--group .--letter {top: var(--header-t);}
}
@media only screen and (min-width: 1024px) {
    .architects_p-list--group .--letter {top: var(--header-d);}
}

.architects_p-list--group .--architect button {
    top: var(--header-m);
    align-self: self-start;a
    width: 100%;
    background: white;
    padding: 2px 0;
    z-index: 5;
}
.architects_p-list--group .--architect[data-status='close'] h4 {color: var(--c-gray);}
.architects_p-list--group .--architect[data-status='open'] h4 {color: black;}
@media only screen and (min-width: 768px) {
    .architects_p-list--group .--architect button {
        position: unset;
        top: var(--header-t);
    }
}
@media only screen and (min-width: 1024px) {
    .architects_p-list--group .--architect button {top: var(--header-d);}
}

@media (hover: hover) {
    .architects_p-list--group .--architect button h4 {transition: 200ms ease-in-out;}
    .architects_p-list--group .--architect button:hover h4 {color: black !important;}
}



.architects_p-list--group .--works {
    min-width: 100vw;
    max-width: 100vw;
    margin-left: -3rem;
    transition: height 1000ms ease-in-out, opacity 200ms ease-in-out;
}
.architects_p-list--group .--architect[data-status='close'] .--works {height: 0;}

.architects_p-list--group .--works .work-block.--grid {
    grid-column: span 2;
    margin: 4px 0 2rem;
}
.architects_p-list--group .--works .work-block.--grid:last-of-type {margin-bottom: 4rem;}
@media only screen and (min-width: 768px) {
    .architects_p-list--group .--works {
        position: fixed;
        top: var(--header-t);
        right: 0;
        left: 50vw;
        min-width: 50vw;
        width: 50vw;
        max-width: 50vw;
        min-height: calc(100vh - var(--header-t));
        height: calc(100vh - var(--header-t));
        max-height: calc(100vh - var(--header-t));
        overflow-y: auto !important;
        margin-left: 0 !important;
        padding-left: 6px !important;
    }
    .architects_p-list--group .--architect[data-status='close'] .--works {
        height: auto !important;
        opacity: 0;
        visibility: hidden;
    }

    .architects_p-list--group .--works .work-block.--grid {
        grid-column: span 6;
        margin-top: 0;
    }
}

@media only screen and (min-width: 1024px) {
    .architects_p-list--group .--works {
        top: var(--header-d);
        min-height: calc(100vh - var(--header-d));
        height: calc(100vh - var(--header-d));
        max-height: calc(100vh - var(--header-d));
    }
    .architects_p-list--group .--works .work-block.--grid {grid-column: span 4;}
}