#work_p-filters {
    top: var(--m-mar-top);
    padding-top: 0;
    row-gap: var(--size-s);
    z-index: 10;
}

.work_p-filer-list[data-status="close"] {height: 2.125rem;}

.work_p-filer-list dt {
    column-gap: var(--size-s);
    transform: translateY(-1px);
}

.work_p-filer-list button {width: 100%;}
.work_p-filer-list button .--title-label {opacity: .15;}

.work_p-filer-list .--title-symbol img,
.work_p-filer-list .--reset img {width: 1rem;}

.work_p-filer-list[data-status="close"] .--title-symbol img:last-of-type {display: none !important;}
.work_p-filer-list[data-status="open"] .--title-symbol img:first-of-type {display: none !important;}

.work_p-filer-list dd:first-of-type {margin-top: var(--size);}
.work_p-filer-list dd:not(:last-of-type) {margin-bottom: .2em;}

.work_p-filer-list dd a:not(.--active) {opacity: .15;}

@media only screen and (min-width: 768px) {
    .work_p-filer-list[data-status="close"] {height: 3.15rem;}
}

@media only screen and (min-width: 1096px) {
    .work_p-filer-list .--title-symbol img,
    .work_p-filer-list .--reset img {
            width: 1.5rem;
        }
}


/* Search */
#work_p-f-seach {
    position: sticky;
    bottom: 1rem;
    margin: 0 1rem 0 auto;
    height: fit-content;
    border-radius: 6px;
}
@media only screen and (min-width: 1096px) {
    #work_p-f-seach {margin: 0;}
}

#work_p-f-search--toggle {
    padding: .5rem;
    width: fit-content;
}
#work_p-f-search--toggle img {
    height: 24px;
    width: auto;
}

/* Form */
#project-search--container {width: calc(100vw - 2rem);}
#work_p-f-seach[data-status="close"] #project-search--container {height: 0;}

#project-search-form {
    margin-top: var(--size-s);
    height: fit-content;
}

#project-search-form input[type="search"] {
    background: transparent !important;
    border-radius: 0 !important;
    outline: 0 !important;
    border: 0 !important;
    padding: 0 7rem 0 0;
    width: 100%;
    height: 100%;
}
#project-search-form input[type="search"]::-webkit-search-decoration,
#project-search-form input[type="search"]::-webkit-search-cancel-button,
#project-search-form input[type="search"]::-webkit-search-results-button,
#project-search-form input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

#project-search-form input[type="submit"] {
    top: 14px;
    right: 10px;
    background: transparent !important;
    border-radius: 0 !important;
    outline: 0 !important;
    border: 0 !important;
    padding: 0;
}

#work_p-f-seach .--reset {
    top: 22px;
    right: 4.5rem;
}

#project-search--container .--search,
#project-search--container .--reset {
    color: var(--c-black) !important;
    cursor: pointer !important;
}

@media only screen and (min-width: 768px) {    
    #project-search-form input[type="submit"] {top: 22px;}
    #work_p-f-seach .--reset {
        top: 30px;
        right: 4.25rem;
    }
}

@media only screen and (min-width: 1096px) {
    #project-search--container {
        position: fixed;
        top: 9.5rem;
        right: calc(calc(calc(100vw - 13rem) / 12) * 3 + 4rem);
        width: calc(100vw - calc(calc(calc(calc(100vw - 13rem) / 12) * 3 + 4rem)) * 2) !important;
        border-radius: 6px;
    }
    #work_p-f-seach[data-status="close"] #project-search--container {height: 0;}
    #work_p-f-seach[data-status="open"] #project-search--container {height: 3rem;}
    
    #project-search-form {margin-top: 0;}
    
    #project-search-form input[type="search"] {padding-right: 12rem;}
    #project-search-form input[type="submit"] {
        top: 14px;
        margin-right: .75rem;
    }
    #work_p-f-seach .--reset {
        top: 14.2px;
        right: 7rem;
    }
}
/* End Form */

#work_p-projects {margin-top: var(--size-m);}
#work_p-projects .--column {
    grid-column: 1/-1;
    row-gap: var(--size-m);
}

@media only screen and (min-width: 768px) {
    #work_p-filters {
        padding: 0 calc(calc(100vw - 9rem) / 8 + 2rem) 1rem;
        column-gap: 1rem;
    }

    .work_p-filer-list {width: 100%;}
    #work_p-projects .--column {grid-column: span 3;}
}

@media only screen and (min-width: 1096px) {
    #work_p-filters {padding: 0 calc(calc(calc(100vw - 13rem) / 12) * 3 + 4rem) 1rem;}

    .work_p-filer-list {width: unset; flex-grow: 1;}
    .work_p-filer-list[data-status="close"] {height: 3rem;}

    .work_p-filer-list {
        min-width: calc(50% - 29px);
        max-width: calc(50% - 29px);
    }

    #work_p-projects .--column {grid-column: span 4;}
}

@media (hover: hover) {
    .work_p-filer-list a {transition: opacity 500ms;}
    .work_p-filer-list a:hover {opacity: 1 !important;}
}