/* Three photographs form one coherent composition. */
.project-mosaic{display:grid;grid-template-columns:1.65fr 1fr;grid-template-rows:1fr 1fr;gap:8px;aspect-ratio:1.88;isolation:isolate}
.mosaic-item{position:relative;display:block;min-width:0;min-height:0;color:var(--on-dark);overflow:hidden;background:var(--soft)}
.mosaic-item-1{grid-row:1/3}
.mosaic-photo{position:absolute;inset:0;overflow:hidden}
.mosaic-photo img{display:block;width:100%;height:100%;object-fit:cover;transform:translateY(var(--mosaic-shift,0px)) scale(1.07);will-change:transform}
.mosaic-caption{position:absolute;inset:auto 0 0;padding:56px 24px 23px;background:linear-gradient(transparent,#171713b8);text-shadow:0 1px 3px #0005}
.mosaic-caption p{margin:0 0 9px;font-size:11px;letter-spacing:.025em;color:var(--on-dark)}
.mosaic-caption h3{margin:0;padding-right:28px;font-size:clamp(22px,2.1vw,32px);font-weight:400;line-height:1.15;color:var(--on-dark);letter-spacing:-.035em}
.mosaic-item-1 h3{font-size:clamp(27px,3.3vw,46px);max-width:460px}
.mosaic-caption>span{position:absolute;right:22px;bottom:23px;font-size:25px}
.mosaic-kind{position:absolute;top:12px;left:14px;background:var(--paper);color:var(--ink);padding:4px 7px;font-size:10px}
.mosaic-item:focus-visible{outline:3px solid var(--bronze);outline-offset:4px;z-index:1}
@media(max-width:760px){
 .project-mosaic{display:flex;flex-direction:column;gap:24px;aspect-ratio:auto}
 .mosaic-item{overflow:visible;background:transparent;color:var(--ink)}
 .mosaic-photo{position:relative;aspect-ratio:4/3}
 .mosaic-photo img{transform:none;will-change:auto}
 .mosaic-caption{position:relative;padding:15px 0 0;background:none;text-shadow:none}
 .mosaic-caption p{color:var(--muted);font-size:11px}
 .mosaic-caption h3,.mosaic-item-1 h3{color:var(--ink);font-size:25px}
 .mosaic-caption>span{right:0;bottom:0;color:var(--accent)}
}
@media(prefers-reduced-motion:reduce){.mosaic-photo img{transform:none;will-change:auto}}