.filters{justify-content:space-between;gap:1rem;padding:1rem 0 1.5rem;display:flex}.sort,.categories{gap:1rem;display:flex}.categories{flex-wrap:wrap}.sort button{flex:none;align-self:flex-start;height:auto}.sort button svg{width:.75rem;height:.75rem;color:var(--bg-accent-2);fill:currentColor}.filters button{outline:1px solid var(--bg-accent-2);background:0 0;border:none;align-items:center;gap:.5rem;margin:0;padding:.3rem .9rem;font-size:.8rem;font-weight:600;display:flex}.categories button svg{width:.9rem;height:.9rem;color:var(--highlight);fill:currentColor}.filters button.no_focus.active_filter svg{color:var(--accent);fill:currentColor}.filters button.no_focus:focus{outline:2px solid var(--accent)}.filters button.active{background:var(--accent);color:var(--text-color);outline:none}.filters button:hover{outline:1px solid var(--bg-accent-3)}.filters button:focus,.filters .sort button.active:focus{outline:2px solid var(--accent)}.filters .sort button.active{outline:1px solid var(--bg-accent-3);background:0 0}.filters .sort button.active svg{color:var(--accent);fill:currentColor}.grid_column ul{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:2rem;padding:0;list-style-type:none;display:grid}.grid_column li{flex-direction:column;justify-content:space-between;height:100%;margin:0;padding:0;display:flex}@media (width<=1100px){h1{font-size:3rem}}@media (width<=768px){.grid_column ul{grid-template-columns:1fr;gap:1rem}.filters{flex-direction:column;gap:1rem}.sort{border-top:1px solid var(--bg-accent-2);padding-top:1rem}}
