#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.5rem;}

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

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

.work_p-filer-list a:not(.--active) {opacity: .15;}
.work_p-filer-list > a {margin-top: 1em;}


#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;}

    .work_p-filer-list {width: 100%;}
    #work_p-f-clients[data-status="close"] {border-top-right-radius: 0; border-bottom-right-radius: 0;}
    #work_p-f-services[data-status="close"] {border-top-left-radius: 0; border-bottom-left-radius: 0;}
    #work_p-f-clients[data-status="open"] {border-top-right-radius: 0;}
    #work_p-f-services[data-status="open"] {border-top-left-radius: 0;}
    
    #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[data-status="close"] {height: 3rem;}

    #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;}
}