.project-container{--project-height:400px;height:var(--project-height);transform-origin:0;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.project-animated{width:100%;height:max-content;transition:all 0s .5s}.project-static{object-fit:cover;width:100%;height:100%}.project:hover{transform:translateY(calc(-100% + var(--project-height)))}.project-popup{--scale:0;--size:150px;pointer-events:none;text-align:center;width:var(--size);height:var(--size);padding:calc(var(--size)*.35)calc(var(--size)*.35)0px 0px;transform:translate(50%,-50%)scale(var(--scale));z-index:10;transform-origin:"top right";color:#000;background-color:#08fdd8;border-radius:50%;justify-content:center;align-items:center;font-family:Inconsolata;font-size:20px;transition:all .25s;display:flex;position:absolute;top:0;right:0}.project-container:hover .project-popup{--scale:1}.overlay{opacity:0;z-index:1;pointer-events:none;background-color:#000;transition:all .25s;position:absolute;inset:0}.project-container:hover .overlay{opacity:.4}@media (max-width:600px) and (min-width:400px){.project-popup{width:clamp(75px,18.75vw,100px);height:clamp(75px,18.75vw,100px);font-size:16px}}@media (hover:none){.project-popup{content:"Click to view the project";border-radius:0 0 24px 24px;width:75%;height:fit-content;padding:10px 20px;top:0;left:50%;transform:translate(-50%)scale(1)}.overlay{opacity:.4}}