.masonry{--gap:10px;--cols:2;--colw:calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));height:calc(var(--h2u) * var(--colw) + var(--h2g) * var(--gap));position:relative}.masonry__item{--x:var(--x2);--yu:var(--y2u);--yg:var(--y2g);width:var(--colw);height:calc(var(--a) * var(--colw));cursor:zoom-in;transform:translate(calc(var(--x) * (var(--colw) + var(--gap))), calc(var(--yu) * var(--colw) + var(--yg) * var(--gap)));background:0 0;border:0;margin:0;padding:0;transition:transform .6s cubic-bezier(.2,0,0,1),width .6s cubic-bezier(.2,0,0,1),height .6s cubic-bezier(.2,0,0,1);position:absolute;top:0;left:0}@container (min-width:520px){.masonry{--cols:3;height:calc(var(--h3u) * var(--colw) + var(--h3g) * var(--gap))}.masonry__item{--x:var(--x3);--yu:var(--y3u);--yg:var(--y3g)}}.masonry__inner{animation:.7s cubic-bezier(.2,0,0,1) backwards masonry-in;animation-delay:calc(var(--i) * 60ms);background:#efebe3;transition:transform .35s cubic-bezier(.2,0,0,1);display:block;position:absolute;inset:0;overflow:hidden}.masonry__inner img{object-fit:cover;opacity:0;transition:opacity .5s}.masonry__inner img.is-loaded{opacity:1}@media (hover:hover){.masonry__item:hover .masonry__inner{transform:scale(.97)}}.masonry__item:focus-visible{outline:none}.masonry__item:focus-visible .masonry__inner{outline:1px solid var(--ink);outline-offset:3px}@keyframes masonry-in{0%{opacity:0;filter:blur(4px);transform:translateY(14px)}}@media (prefers-reduced-motion:reduce){.masonry__item,.masonry__inner{transition:none;animation:none}}