.collage{padding:calc(var(--nav-h) + clamp(16px, 3vw, 40px)) var(--gutter) clamp(72px, 9vw, 128px);container-type:inline-size}.mosaic{--cols:6;grid-template-columns:repeat(var(--cols), minmax(0, 1fr));grid-auto-rows:calc(100cqi / var(--cols));display:grid}.mosaic__cell{opacity:0;transition:opacity .9s var(--ease), transform .9s var(--ease);transition-delay:var(--d,0s);position:relative;overflow:hidden;transform:scale(.94)}.mosaic__cell.is-in{opacity:1;transform:none}.mosaic__motif svg{width:100%;height:100%;position:absolute;inset:0}.mosaic__photo{cursor:zoom-in;-webkit-tap-highlight-color:transparent;outline:none}.mosaic__frame{clip-path:var(--clip);transition:clip-path .8s var(--ease);position:absolute;inset:0}.mosaic__frame picture{width:100%;height:100%;display:block}.mosaic__frame img{object-fit:cover;width:100%;height:100%;transition:transform 1.1s var(--ease);transform:scale(1.08)}.mosaic__name{pointer-events:none;max-width:100%;position:absolute;bottom:0;left:0;overflow:hidden}.mosaic__name span{background:var(--paper);color:var(--ink);font-size:var(--step--1);letter-spacing:.02em;white-space:nowrap;text-overflow:ellipsis;transition:transform .6s var(--ease);padding:6px 12px 7px;font-weight:450;line-height:1.2;display:block;overflow:hidden;transform:translateY(105%)}.mosaic__photo:focus .mosaic__frame{clip-path:var(--open)}.mosaic__photo:focus img{transform:none}.mosaic__photo:focus .mosaic__name span{transition-delay:.15s;transform:none}@media (hover:hover){.mosaic__photo:hover .mosaic__frame{clip-path:var(--open)}.mosaic__photo:hover img{transform:none}.mosaic__photo:hover .mosaic__name span{transition-delay:.15s;transform:none}}.mosaic__photo:focus-visible:after{content:"";border:2px solid var(--orange-deep);pointer-events:none;position:absolute;inset:3px}.mosaic__board{background:var(--cream);cursor:grab}.mosaic__board:active{cursor:grabbing}.mosaic__stage{position:absolute;inset:0}.mosaic__title{font-size:var(--step-0);letter-spacing:.01em;color:var(--ink);pointer-events:none;font-weight:400;position:absolute;bottom:clamp(12px,2cqi,24px);left:clamp(14px,2cqi,28px)}.mosaic__title>span{transition-delay:.5s}@media (width<=720px){.mosaic{--cols:3}.mosaic__name span{padding:5px 8px 6px;font-size:.75rem}}