.projects-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;display:grid}
.project-preview{flex-direction:column;height:100%;display:flex;position:relative;overflow:hidden}.project-preview .preview-images{aspect-ratio:.7;flex-grow:1;display:flex;position:relative;overflow:hidden}.project-preview .preview-images:before{content:"";z-index:10;opacity:0;border:6px solid;width:calc(100% - 12px);height:calc(100% - 12px);transition:opacity .2s;position:absolute;top:0;left:0}.project-preview .name-hover-bg{border-radius:20px;width:10px;height:10px;margin-right:10px}.project-preview .project-name{font-family:var(--headerFont);color:var(--textColour);white-space:nowrap;text-overflow:ellipsis;align-items:center;padding-top:10px;transition:all .3s;display:flex;position:relative;overflow:hidden}.project-preview .project-name[data-show-on-hover=true]{color:#fff;opacity:0;position:absolute;bottom:10px;left:10px;transform:translateY(100%)}@media (hover:hover){.project-preview:hover{cursor:pointer}.project-preview:hover .preview-images:before{opacity:1}.project-preview:hover .project-name[data-show-on-hover=true]{opacity:1;transform:translateY(0%)}}.project-preview .default-image{object-fit:cover;flex-grow:1}.project-preview .hover-image{z-index:0;object-fit:cover;width:100%;height:100%;top:0;left:0;position:absolute!important}.project-preview[data-hover-mode=Fade] .default-image,.project-preview[data-hover-mode=Fade] .hover-image{transition:opacity .8s}.project-preview[data-hover-mode=Fade] .default-image{opacity:1}.project-preview[data-hover-mode=Fade] .hover-image{opacity:0}@media (hover:hover){.project-preview[data-hover-mode=Fade]:hover[data-hover-mode=Fade] .default-image{opacity:0}.project-preview[data-hover-mode=Fade]:hover[data-hover-mode=Fade] .hover-image{opacity:1}}.project-preview[data-hover-mode=Zoom] .default-image,.project-preview[data-hover-mode=Zoom] .hover-image{transition:opacity .5s,transform .5s}.project-preview[data-hover-mode=Zoom] .default-image{opacity:1}.project-preview[data-hover-mode=Zoom] .hover-image{opacity:0;transform:scale(1)}@media (hover:hover){.project-preview[data-hover-mode=Zoom]:hover[data-hover-mode=Zoom] .default-image{opacity:0;transform:scale(1.5)}.project-preview[data-hover-mode=Zoom]:hover[data-hover-mode=Zoom] .hover-image{opacity:1;transform:scale(1.1)}}.project-preview[data-hover-mode=Slide] .default-image,.project-preview[data-hover-mode=Slide] .hover-image{transition:opacity .5s,transform .5s}.project-preview[data-hover-mode=Slide] .default-image{opacity:1;transform:scale(1.05)translateY(0%)}.project-preview[data-hover-mode=Slide] .hover-image{opacity:0;transform:scale(1.05)translateY(5%)}@media (hover:hover){.project-preview[data-hover-mode=Slide]:hover[data-hover-mode=Slide] .default-image{opacity:0;transform:scale(1.05)translateY(-5%)}.project-preview[data-hover-mode=Slide]:hover[data-hover-mode=Slide] .hover-image{opacity:1;transform:scale(1.05)translateY(0%)}}