.work-modal{display:none}.work-modal.active{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10000000;background-color:#0006;place-items:center;width:100%;height:100vh;animation:.25s modal-fade-in;display:grid;position:fixed;top:0;left:0}.work-modal.active .modal-content{animation:.3s modal-pop-in}.work-modal.active.closing{animation:.25s forwards modal-fade-out}.work-modal.active.closing .modal-content{animation:.3s forwards modal-pop-out}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-fade-out{0%{opacity:1}to{opacity:0}}@keyframes modal-pop-in{0%{opacity:0;transform:translateY(24px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes modal-pop-out{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(24px)scale(.96)}}.modal-content{background-color:#fff;border-radius:12px;grid-template-rows:max-content 1fr;grid-template-columns:100%;width:70vw;max-width:900px;height:max-content;max-height:90vh;display:grid;overflow:hidden}.topbar{border-bottom:1px solid #eee;grid-template-columns:1fr max-content;align-items:center;width:100%;height:max-content;padding:20px;display:grid}.modal-title{font-family:var(--font-bebas-neue), sans-serif;color:#222;font-size:2rem}.modal-close-button{border-radius:4px;padding:.25rem;display:grid}.modal-close-icon{opacity:1;cursor:pointer;transition:opacity .3s,transform .3s}.modal-close-icon:hover{opacity:.4;transform:scale(1.05)}.modal-body{gap:1.5vw;padding:20px;display:grid;overflow-y:auto}.modal-image{object-fit:cover;border-radius:.5vw;width:100%;height:auto}.modal-description{font-family:var(--font-hind), sans-serif;color:#444;font-size:1.5rem;line-height:1.6}.modal-link{width:max-content;font-family:var(--font-bebas-neue), sans-serif;color:#fff;background-color:#222;border-radius:.3vw;justify-self:center;padding:.8vw 2vw;font-size:1.3vw;text-decoration:none;transition:transform .3s;display:grid}.modal-link:hover{transform:scale(1.05)}.project-image-button{width:100%;padding:0;display:grid}.project-image{clip-path:polygon(0% 0%,100% 17.5%,100% 100%,0% 82.5%);object-fit:cover;width:100%;height:50vw;transition:opacity .7s;position:relative;top:-4vw}.project-image:hover{opacity:.5}