.project-image-panels{width:100%;min-width:0;margin-block-start:40px;scroll-margin-top:100px}.project-panel-hint{margin:0 0 20px;color:hsl(var(--muted-foreground));font-size:12px;line-height:1.9}.project-panel-row{display:flex;gap:12px;height:clamp(430px,46vw,560px);margin-block:16px}.project-panel{position:relative;flex:1 1 0;min-width:0;height:100%;margin:0;overflow:hidden;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--muted));transition:flex-grow .65s cubic-bezier(.2,.6,.2,1)}.project-panel.is-active{flex-grow:2.35}.project-panel-open{position:relative;display:block;width:100%;height:100%;padding:0;border:0;color:#fff;background:transparent;text-align:start;cursor:zoom-in}.project-panel-open>img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}.project-panel.is-active img{transform:scale(1.025)}.project-panel-shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(0deg,rgba(13,12,11,.82),rgba(13,12,11,.22) 48%,transparent);pointer-events:none}.project-panel-copy{position:absolute;inset-inline:0;bottom:0;display:grid;gap:10px;padding:24px 18px}.project-panel-index{font-size:11px;opacity:.8}.project-panel-title{font-size:clamp(17px,1.5vw,25px);line-height:1.55;overflow-wrap:break-word}.project-panel-description{font-size:13px;line-height:1.9;opacity:0;max-height:0;overflow:hidden;transition:opacity .4s,max-height .55s}.project-panel.is-active .project-panel-description{opacity:1;max-height:18em}.project-panel-expand{position:absolute;inset-inline-end:18px;top:18px;opacity:0;transition:opacity .25s}.project-panel.is-active .project-panel-expand{opacity:1}.project-panel-open:focus-visible{outline:2px solid white;outline-offset:-5px;border-radius:12px}.project-panel-nav{display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:12px 18px;min-height:44px;border:1px solid hsl(var(--border));border-radius:999px;font-size:12px}.project-panel-lightbox[dir=rtl] .project-panel-nav svg{transform:rotate(180deg)}@media (min-width:768px) and (max-width:1100px){.project-panel-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto}.project-panel{height:360px}}@media (max-width:767px){.project-panel-row{display:flex;flex-direction:column;height:auto;gap:16px}.project-panel,.project-panel.is-active{flex:none;height:350px}.project-panel-copy{padding:24px}.project-panel-title{font-size:25px}.project-panel-description{opacity:1;max-height:18em}.project-panel-expand{opacity:1}}@media (prefers-reduced-motion:reduce){.project-panel,.project-panel-open>img,.project-panel-description,.project-panel-expand{transition:none}}