.project-card{background-color:hsl(var(--accent));overflow:hidden;cursor:pointer;position:relative;border-radius:.75em;z-index:1}.project-card:hover .image-overlay,.project-card:hover .project-card-content,.project-card:hover:before{transition:opacity .25s ease-in-out;opacity:1}.project-card:hover .project-card-underlay{transition:display 2s ease-in-out;display:none}.project-card:hover .project-card-title{transition:opacity .25s ease-in-out;opacity:0}.project-card-underlay{background:linear-gradient(135deg,transparent 5%,hsl(var(--secondary)) 50%,transparent 98%)}.project-card:before{position:absolute;pointer-events:none;border-radius:inherit;top:0;left:0;height:100%;width:100%;content:"";background:linear-gradient(45deg,transparent 5%,hsl(var(--primary)) 50%,transparent 98%);opacity:0;z-index:1;transition:opacity .4s ease-in-out}.project-card-title{position:absolute;transform:translate(0);top:10%;width:100%}.project-card-content{position:relative;display:flex;padding:10px;border-radius:inherit;transition:opacity .5s ease-in-out;z-index:2}.project-title{font-size:2rem;margin-bottom:.5rem}.project-summary{position:absolute;transform:translateY(-50%);top:50%;width:100%}.project-date{position:absolute;bottom:5px;right:5px;font-size:.875rem;opacity:.8}.image-wrapper{top:50%;left:50%;transform:translateX(-50%) translateY(-50%);width:calc(100% - 1px);height:calc(100% - 1px)}.image-overlay,.image-wrapper{border-radius:inherit;position:absolute;z-index:2}.image-overlay{background:linear-gradient(to top left,rgba(0,0,0,.25),rgba(0,0,0,.35));inset:0;opacity:0;transition:opacity .25s ease}.project-image{position:absolute;padding:1px;border-radius:inherit;width:100%;height:100%;object-fit:cover;left:100%;top:0;transition:transform .4s ease,opacity .4s ease}.project-image.active{transform:translateX(0);left:0;opacity:1}.project-image.inactive{transform:translateX(-100%);left:-100%;opacity:0}@media (max-width:768px){.project-card:before{opacity:.25}.project-summary{transform:none;top:auto;align-self:end;bottom:10%}}@media (min-width:768px){.project-card-title{transform:translateY(-50%);top:50%}}@media (min-width:640px) and (max-width:768px){.project-card-title{top:5%}.project-summary{bottom:5%}}