.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:18px}
.project-card,.project-one{position:relative;grid-row:auto;height:auto;aspect-ratio:4/5;overflow:hidden;background:#161915;cursor:zoom-in;border:1px solid rgba(17,19,16,.1)}
.project-card:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,12,10,.02) 42%,rgba(10,12,10,.9) 100%);pointer-events:none}
.project-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.project-one:after{display:none}
.project-image{position:absolute;inset:0;width:100%;height:100%;transition:transform .55s ease;display:block}
.project-image-contain{object-fit:contain;background:#171916}
.project-image-cover{object-fit:cover}
.project-card:hover .project-image{transform:scale(1.025)}
.project-index,.project-info{z-index:2}
.project-info{left:22px;right:22px;bottom:20px}
.project-info h3{font-size:clamp(24px,2.2vw,34px)}
.project-lightbox[hidden]{display:none}
.project-lightbox{position:fixed;inset:0;z-index:100;background:rgba(7,8,7,.94);display:grid;place-items:center;padding:56px 24px 72px}
.project-lightbox img{display:block;max-width:min(94vw,1100px);max-height:82vh;width:auto;height:auto;object-fit:contain;box-shadow:0 24px 80px rgba(0,0,0,.45)}
.lightbox-close{position:absolute;top:18px;right:24px;width:46px;height:46px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(0,0,0,.28);color:white;font-size:30px;line-height:1;cursor:pointer}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:50px;height:64px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;font-size:42px;line-height:1;cursor:pointer}.lightbox-nav[hidden]{display:none}.lightbox-prev{left:22px}.lightbox-next{right:22px}
.lightbox-caption{position:absolute;left:24px;right:24px;bottom:22px;text-align:center;color:white;font-size:14px;letter-spacing:.04em}
.lightbox-open{overflow:hidden}
@media(max-width:980px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.project-grid{grid-template-columns:1fr}.project-card,.project-one{height:auto;aspect-ratio:4/5}.project-info h3{font-size:28px}.lightbox-nav{width:42px;height:52px}.lightbox-prev{left:6px}.lightbox-next{right:6px}}