.project-item{cursor:pointer;will-change:transform;opacity:0;background:#fff;flex-direction:column;transition:opacity .3s;display:flex;position:relative;overflow:hidden;transform:translateZ(0)}.project-item.loaded{opacity:1}.project-item .image-container{width:100%;position:relative}.project-item .image-wrapper{width:100%;line-height:0;display:block;position:relative}.project-item .project-image{object-fit:cover;object-position:center;z-index:0;opacity:0;background-color:#0000;width:100%;height:auto;transition:opacity .3s;display:block}.project-item .project-image.loaded{opacity:1}.project-item .overlay{z-index:1;background:#00000059;transition:transform .25s cubic-bezier(.4,0,.2,1);position:absolute;inset:0;transform:translateZ(0)scale(0)}.project-item .overlay.visible{transform:translateZ(0)scale(1)}.project-item .project-body-container{color:#fff;text-align:center;z-index:2;opacity:0;pointer-events:none;justify-content:center;align-items:center;column-gap:15px;padding:1rem;transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;inset:0;transform:translateZ(0)translateY(20px)}.project-item .project-body-container.visible{opacity:1;transform:translateZ(0)translateY(0)}.project-item .project-body-container .project-body-container-logo{justify-content:center;align-items:center;max-width:50px;max-height:50px;display:flex}.project-item .project-body-container .project-body-container-logo svg{width:100%;height:100%;display:block}.project-item .project-body-container .project-body-container-detail{flex-direction:column;align-items:flex-start;gap:18px;display:flex}.project-item .project-body-container p{text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-weight:500}.project-item:focus-within .overlay{transform:translateZ(0)scale(1)}.project-item:focus-within .project-body-container{opacity:1;transform:translateZ(0)translateY(0)}@media (max-width:768px){.project-item .project-body-container{column-gap:10px;padding:.75rem}.project-item .project-body-container .project-body-container-logo{max-width:40px;max-height:40px}.project-item .project-body-container p{font-size:.9rem}}@media (max-width:480px){.project-item .project-body-container{column-gap:8px;padding:.5rem}.project-item .project-body-container .project-body-container-logo{max-width:35px;max-height:35px}.project-item .project-body-container .project-body-container-detail p{font-size:.85rem}}
.projects-container{contain:layout style paint;opacity:0;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;max-width:1200px;margin:0 auto;padding:1rem;transition:opacity .4s;display:grid}.projects-container.is-loaded{opacity:1}.projects-loader{justify-content:center;align-items:center;gap:6px;height:200px;display:flex}.projects-loader__dot{background:#999;border-radius:50%;width:8px;height:8px;animation:1s ease-in-out infinite projects-bounce}.projects-loader__dot:nth-child(2){animation-delay:.15s}.projects-loader__dot:nth-child(3){animation-delay:.3s}@keyframes projects-bounce{0%,80%,to{opacity:.6;transform:scale(.6)}40%{opacity:1;transform:scale(1)}}@media (max-width:1024px){.projects-container{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;padding:.75rem}}@media (max-width:768px){.projects-container{grid-template-columns:repeat(2,1fr);gap:.5rem;padding:.5rem}}@media (max-width:480px){.projects-container{grid-template-columns:1fr;gap:.5rem;padding:.5rem}}