.outer-container{width:22.5em;border-radius:.8rem;overflow:hidden;cursor:pointer;box-sizing:border-box;border:2px solid transparent;transition:border .8s ease}.outer-container:hover{border:2px solid var(--accent)}.container{display:flex;flex-direction:column}.image-card img,.image-card video{width:100%;aspect-ratio:1/1;display:block;object-fit:cover;border-top-left-radius:.8rem;border-top-right-radius:.8rem;background-color:white}.image-card video{object-position:left center}.other{max-height:0;overflow:hidden;transition:max-height .7s ease,padding .7s ease;background-color:var(--lighter-background);padding:0 4%}.outer-container:hover .other{max-height:1000px;padding:2.5% 4%}.other-padding{display:flex;flex-direction:column;gap:.5em}.container .top{display:flex;justify-content:space-between;align-items:center}.title h3{margin:0;font-size:1.1em;font-weight:600;word-break:break-word;white-space:normal;transition:color .5s ease}.title h3:hover{color:var(--accent)}.links{display:flex;gap:.3em;margin-left:.5em;align-items:center}.links span{color:var(--foreground-special);transition:color .6s ease}.links span:hover{color:var(--accent)}.links span svg{width:1.4em}.description p{font-size:.85em;margin:0}.tags{display:flex;flex-flow:row wrap}.tags .tag{margin-right:.4em}@media (min-width:768px) and (max-width:1439px){.outer-container{width:23em}}@media (min-width:768px) and (max-width:1023px){.outer-container{width:20.5em}}@media (min-width:0px) and (max-width:767px){.outer-container{width:100%}}.projects{display:flex;flex-flow:row wrap;gap:2em;justify-content:space-between}.project{display:inline-block}.filter{display:flex;flex-flow:row nowrap;justify-content:space-between;gap:1em;margin-bottom:1em}.filter .searchbar{flex:3}.filter .tag-filters{flex:1}.filter .searchbar,.filter .tag-filters{background-color:var(--lighter-background);color:var(--foreground-special);box-sizing:border-box;border:2px solid var(--muted-accent);border-radius:.4em}.filter .searchbar input,.filter .tag-filters select{width:100%;padding:.5em;font-size:.9em}.filter .tag-filters select{height:100%}@media (min-width:768px) and (max-width:1439px){.projects{gap:1.5em}}@media (min-width:768px) and (max-width:1023px){.projects{gap:1.7em}}@media (min-width:0px) and (max-width:767px){.projects{gap:2.2em}.filter .searchbar{flex:2}}@media (min-width:375px) and (max-width:424px){.filter{gap:.75em}.filter .searchbar{flex:1.75}}@media (min-width:320px) and (max-width:374px){.filter{gap:.75em}.filter .searchbar{flex:1.3}}