.container{&.home{display:flex;position:relative;min-height:100vh;gap:3em;nav{display:flex;position:-webkit-sticky;position:sticky;top:8em;flex-direction:column;width:19rem;height:-moz-fit-content;height:fit-content;padding:1.125rem;gap:1.125rem;border-radius:.75rem;background-color:var(--background-color-secondary);.search{position:relative;width:100%;.icon{z-index:2;position:absolute;top:50%;left:1em;transform:translateY(-50%);transform-origin:center;transition:transform .24s var(--ease-elastic),color .24s var(--ease-fluid)}input[type=search]{position:relative;width:100%;min-height:2.25rem;padding:.75rem .75rem .75rem 2.5em;border:none;border-radius:.375rem;outline-color:transparent;background-color:var(--background-color-primary);transition:background-color .24s var(--ease-fluid),color .24s var(--ease-fluid),outline .24s var(--ease-fluid);&::placeholder{color:var(--color-body)}&:focus,&:focus-visible,&:hover{outline-color:var(--background-color-tertiary);outline-style:solid;outline-width:.125rem}}&:has(input[type=search]:focus){.icon{transform:rotate(-6deg) translateY(-50%);color:var(--color-display)}}}.filter-group{display:flex;flex-wrap:wrap;width:100%;gap:.5rem;.label{display:block;width:100%;margin:.375rem 0 .375rem .5rem;color:var(--color-display);font-weight:600}.item{display:flex;position:relative;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;padding:.5rem .75rem;gap:.5em;border-radius:.375rem;background-color:var(--background-color-primary);font-weight:600;transition:width .24s var(--ease-elastic),padding .24s var(--ease-fluid);input[type=radio]{display:none;&:checked+.icon{display:block;color:var(--green);path{animation:draw-tick .54s var(--ease-fluid) forwards}}}.icon{display:none;transition:display .24s var(--ease-elastic);path{stroke-dasharray:24;stroke-dashoffset:24}}&:focus,&:focus-visible,&:hover{outline-color:var(--background-color-tertiary);outline-style:solid;outline-width:.125rem}&:has(input[type=radio]:checked){padding-right:.875rem}}}}ul{display:flex;flex-grow:1;flex-shrink:1;flex-basis:0;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;height:-moz-fit-content;height:fit-content;margin:0;padding:0;gap:1.5em;list-style-type:none;li{a{width:15rem;height:100%;border-radius:.75rem;outline-color:transparent;background-color:var(--background-color-secondary);animation:items-fade-in var(--ease-elastic) both;transition:background-color .24s var(--ease-fluid),outline .24s var(--ease-fluid);animation-timeline:view();animation-range:entry 0 cover 30%;display:flex;align-items:center;justify-content:flex-start;padding:1.125rem;gap:1.125rem;.icon{display:flex;align-items:center;justify-content:center;width:30%;height:100%;img,svg{width:100%;height:100%;object-fit:contain}}.content{color:var(--color-caption);font-weight:600;font-size:var(--font-size-caption);line-height:1.8;h3{color:var(--color-display);font-size:.9375rem}}&:focus,&:focus-visible,&:hover{outline-color:var(--background-color-tertiary);outline-style:solid;outline-width:.125rem;background-color:var(--background-color-primary)}}&.empty{margin-top:1.125rem;line-height:1.8;h3{color:var(--color-display);font-size:.9375rem}}}}@media (max-width:60rem){flex-direction:column;nav{position:relative;top:unset;width:100%}ul{display:grid;grid-template-columns:1fr 1fr;flex:none;width:100%;li{a{flex-direction:column;width:100%;.icon{width:4.125rem}.content{text-align:center;h3{font-size:var(--font-size-body)}}}}}}}}@keyframes draw-tick{to{stroke-dashoffset:0}}@keyframes items-fade-in{0%{transform:translateY(1em);opacity:.6}to{transform:translateY(0);opacity:1}}