@layer components{.photo-gallery{margin-block:var(--space-8)}.photo-grid{columns:2 220px;column-gap:var(--space-2);list-style:none;& > li{break-inside:avoid;margin-block-end:var(--space-4)}&:has(> li:only-child){columns:1;& .photo-item{inline-size:fit-content;max-inline-size:100%;margin-inline:auto}& img{inline-size:auto;max-inline-size:100%;max-block-size:min(72svh,640px)}& .photo-caption{inline-size:0;min-inline-size:100%}& .photo-item[data-photo-fit]{--photo-cap:100vw;inline-size:min(100%,calc(min(72svh,640px) * var(--photo-w) / var(--photo-h)),var(--photo-cap));@media (min-width:1264px){--photo-cap:1200px}& img{inline-size:100%;max-block-size:none}}}}.photo-item{display:grid;gap:var(--space-2)}.photo-open{display:block;overflow:hidden;border-radius:var(--radius-panel);background:var(--surface-muted);cursor:zoom-in;& picture{display:contents}& img{display:block;inline-size:100%;block-size:auto;transition:scale var(--duration-standard) var(--ease-standard)}&:hover img{scale:1.015}&:focus-visible{outline:2px solid var(--accent);outline-offset:2px}}.photo-caption{display:grid;gap:2px;padding-inline:2px;color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6}.photo-title{color:var(--foreground);white-space:pre-line}.photo-note{color:var(--text-muted);font-size:var(--text-xs)}:root:has(.photo-viewer[open]){overflow:hidden}.photo-viewer{position:fixed;inset:0;inline-size:100vw;max-inline-size:none;block-size:100dvh;max-block-size:none;margin:0;padding:0;border:0;background:oklch(0.12 0.01 60 / var(--viewer-backdrop,0.97));color:white;overscroll-behavior:contain;&::backdrop{background:transparent}&[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}}.viewer-bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4)}.viewer-count{margin-inline-end:auto;color:oklch(1 0 0 / 0.75);font-size:var(--text-sm);font-variant-numeric:tabular-nums}.viewer-button{display:grid;place-items:center;inline-size:40px;block-size:40px;border:0;border-radius:var(--radius-pill);background:oklch(1 0 0 / 0.1);color:white;cursor:pointer;&:hover:not(:disabled){background:oklch(1 0 0 / 0.2)}&:disabled{opacity:0.3;cursor:default}&:focus-visible{outline:2px solid white;outline-offset:2px}& span{inline-size:18px;block-size:18px;background:currentColor;mask:var(--viewer-icon) center / contain no-repeat}&[data-icon='close']{--viewer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}&[data-icon='download']{--viewer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E")}&[data-icon='open']{--viewer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M10 6H5v13h13v-5'/%3E%3C/svg%3E")}&[data-icon='zoom']{--viewer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E")}&[data-icon='zoom'][aria-pressed='true']{--viewer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M8 11h6'/%3E%3C/svg%3E")}&[data-icon='prev'],&[data-icon='next']{--viewer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}&[data-icon='next'] span{rotate:180deg}}.viewer-stage{position:relative;display:grid;place-items:center;overflow:hidden;touch-action:none;user-select:none;& img{position:absolute;inset:0;margin:auto;max-inline-size:calc(100% - 2 * var(--space-4));max-block-size:100%;inline-size:auto;block-size:auto;border-radius:var(--radius-panel);transform-origin:center;will-change:transform;-webkit-user-drag:none}&[data-zoomed] img{cursor:grab}}.viewer-side{position:absolute;inset-block-start:50%;translate:0 -50%;z-index:1;&[data-icon='prev']{inset-inline-start:var(--space-4)}&[data-icon='next']{inset-inline-end:var(--space-4)}@media (width <= 640px){display:none}&[hidden]{display:none}}.viewer-foot{display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4) max(var(--space-4),env(safe-area-inset-bottom))}.viewer-caption{display:grid;gap:2px;max-inline-size:40rem;min-block-size:1lh;color:oklch(1 0 0 / 0.86);font-size:var(--text-sm);line-height:1.6;text-align:center;& small{color:oklch(1 0 0 / 0.6);font-size:var(--text-xs)}}.viewer-thumbs{display:flex;gap:var(--space-1);max-inline-size:100%;overflow-x:auto;scrollbar-width:none;& button{flex:none;inline-size:44px;block-size:44px;padding:0;overflow:hidden;border:0;border-radius:var(--radius-control);background:none;opacity:0.45;cursor:pointer;transition:opacity var(--duration-fast) var(--ease-standard);&[aria-current='true']{opacity:1;outline:2px solid white;outline-offset:-2px}}& img{inline-size:100%;block-size:100%;object-fit:cover}}::view-transition-group(photo-flight){animation-duration:0.36s;animation-timing-function:cubic-bezier(0.22,1,0.36,1)}::view-transition-old(photo-flight),::view-transition-new(photo-flight){block-size:100%;overflow:clip;border-radius:var(--radius-panel)}@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}}