.mosaic{z-index:var(--layer-content);position:relative;container-type:inline-size}.mosaic__canvas{--cols:1;--gap:var(--grid-gap);--col:calc((100cqi - (var(--cols) + 1) * var(--gap)) / var(--cols));--u:var(--u1);--g:var(--g1);block-size:calc(var(--u) * var(--col) + (var(--g) + 2) * var(--gap));position:relative}.mosaic__tile{--x:var(--x1);--tu:var(--tu1);--tg:var(--tg1);--hu:var(--hu1);--hg:var(--hg1);inline-size:var(--col);block-size:calc(var(--hu) * var(--col) + var(--hg) * var(--gap));position:absolute;inset-block-start:calc(var(--gap) + var(--tu) * var(--col) + var(--tg) * var(--gap));inset-inline-start:calc(var(--gap) + var(--x) * (var(--col) + var(--gap)))}@container (width>=768px){.mosaic__canvas{--cols:2;--u:var(--u2);--g:var(--g2)}.mosaic__tile{--x:var(--x2);--tu:var(--tu2);--tg:var(--tg2);--hu:var(--hu2);--hg:var(--hg2)}}@container (width>=992px){.mosaic__canvas{--cols:3;--u:var(--u3);--g:var(--g3)}.mosaic__tile{--x:var(--x3);--tu:var(--tu3);--tg:var(--tg3);--hu:var(--hu3);--hg:var(--hg3)}}.tile{block-size:100%;inline-size:100%;color:var(--color-text);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;display:block;position:relative;overflow:hidden;container-type:inline-size}.tile__image{object-fit:cover;block-size:100%;inline-size:100%}.tile__veil{justify-content:center;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--tile-inset);-webkit-backdrop-filter:none;backdrop-filter:none;text-align:center;text-transform:uppercase;transition:background-color var(--duration-fast) var(--ease-exit), -webkit-backdrop-filter var(--duration-fast) var(--ease-exit), backdrop-filter var(--duration-fast) var(--ease-exit);background-color:#0000;flex-direction:column;display:flex;position:absolute;inset:0}.tile__title,.tile__tagline{opacity:0;transition:opacity var(--duration-fast) var(--ease-exit)}.tile__title{color:var(--color-accent);font-family:var(--font-display);font-size:var(--type-tile);font-weight:400;line-height:var(--leading-title);letter-spacing:var(--tracking-display);text-shadow:var(--shadow-title);text-wrap:balance;overflow-wrap:anywhere}.tile__tagline{font-family:var(--font-label);font-size:var(--type-tile-tagline);font-weight:400;line-height:var(--leading-display);text-wrap:balance}@media (hover:hover){.tile:hover .tile__veil{background-color:var(--color-tile-veil);-webkit-backdrop-filter:blur(var(--blur-tile));backdrop-filter:blur(var(--blur-tile));transition-duration:var(--duration-base);transition-timing-function:var(--ease-standard)}.tile:hover :is(.tile__title,.tile__tagline){opacity:1;transition-duration:var(--duration-base);transition-timing-function:var(--ease-standard)}}.tile:focus-visible{outline-offset:calc(-1 * var(--focus-ring) * 2)}.tile[data-pressed] .tile__veil,.tile:focus-visible .tile__veil{background-color:var(--color-tile-veil);-webkit-backdrop-filter:blur(var(--blur-tile));backdrop-filter:blur(var(--blur-tile));transition-duration:var(--duration-base);transition-timing-function:var(--ease-standard)}.tile[data-pressed] :is(.tile__title,.tile__tagline),.tile:focus-visible :is(.tile__title,.tile__tagline){opacity:1;transition-duration:var(--duration-base);transition-timing-function:var(--ease-standard)}