.work{background-color:var(--background);color:var(--foreground);padding:1.5rem;display:flex}.work-sidebar{flex:1}.work-main{flex:3;margin:17.5svh 0 5svh}.work-container{margin-bottom:7.5rem}.work-year{will-change:transform;z-index:1;position:relative;top:8rem;left:-7rem;transform:translateY(0%)}.work-projects-container{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.work-project{flex-direction:column;margin-bottom:.5rem;transition:transform .4s cubic-bezier(.22,1,.36,1);display:flex}.work-project-img{aspect-ratio:5/3;background:var(--background-200);margin-bottom:.75rem;position:relative;overflow:hidden}.work-project-img img{object-fit:cover;width:100%;height:100%;transition:transform .8s cubic-bezier(.22,1,.36,1),filter .8s cubic-bezier(.22,1,.36,1),opacity .8s cubic-bezier(.22,1,.36,1)}.work-project-img:after{content:"";opacity:0;pointer-events:none;border:1px solid #e4e7df38;transition:opacity .4s,transform .4s;position:absolute;inset:0;transform:scale(.98)}.work-project-info{flex-direction:column;gap:.25rem;display:flex}.work-project-info-name,.work-project-info-tags{transition:color .35s,opacity .35s}.work-project-info-tags{text-transform:capitalize;color:var(--foreground-200)}@media (hover:hover) and (pointer:fine){.work-project{cursor:pointer}.work-project:hover{transform:translateY(-.3rem)}.work-project:hover .work-project-img img{filter:saturate(1.05)contrast(1.02);opacity:.95;transform:scale(1.045)}.work-project:hover .work-project-img:after{opacity:1;transform:scale(1)}.work-project:hover .work-project-info-name{color:var(--foreground)}.work-project:hover .work-project-info-tags{color:color-mix(in srgb,var(--foreground),var(--foreground-200)35%)}}.year-indices{z-index:1;flex-direction:column;gap:1rem;display:flex;position:fixed;top:30svh;left:1.5rem}.year-index{color:var(--foreground-200);cursor:pointer;flex-direction:column;width:max-content;transition:color .3s;display:flex;position:relative}.year-index-highlighter{background-color:var(--foreground);transform-origin:0;width:100%;height:1.5px;transform:scaleX(0)}.year-index.active{color:var(--foreground)}.year-index.year-index-var-1{margin-left:0}.year-index.year-index-var-2{margin-left:2rem}.year-index.year-index-var-3{margin-left:1rem}@media (max-width:1000px){.work-projects-container{grid-template-columns:1fr}.work-year{margin-bottom:1.5rem;top:0;left:0}.year-indices{gap:.5rem;top:12.5svh}}