.masonry-gallery{--columns: 5;display:flex;gap:.5rem;width:100%;min-height:400px;box-sizing:border-box;background:var(--color-pure);padding:0;position:relative;z-index:10}@media (max-width: 31.9375rem){.masonry-gallery{--columns: 1}.masonry-gallery .masonry-column{gap:1rem!important}}@media (min-width: 32rem) and (max-width: 47.9375rem){.masonry-gallery{--columns: 2}}@media (min-width: 48rem) and (max-width: 55.9375rem){.masonry-gallery{--columns: 3}}@media (min-width: 56rem) and (max-width: 79.9375rem){.masonry-gallery{--columns: 4}}@media (min-width: 80rem){.masonry-gallery{--columns: 5}}.masonry-column{display:flex;flex-direction:column;gap:.5rem;flex:1}.portfolio-image{width:100%;box-sizing:border-box;padding:0}.portfolio-image>div{width:100%;background:var(--color-accent);overflow:hidden;position:relative;border-radius:var(--border-radius);cursor:pointer;aspect-ratio:var(--image-aspect-ratio, auto)}[data-theme=dark] .portfolio-image>div{background:#0a0a0a}.portfolio-image picture{display:block;width:100%;height:100%;position:relative;z-index:2}.portfolio-image picture img{width:100%;height:100%;object-fit:cover;display:block}.portfolio-image [data-placeholder]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:1;transition:opacity .3s ease-out}.portfolio-image [data-placeholder][data-lqip-type=blur]{filter:blur(5px);transform:scale(1.1)}.gallery-image-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--color-secondary);font-family:var(--font-caption);font-size:var(--text-sm);text-align:center;padding:1rem}.gallery-image-error-icon{margin-bottom:.5rem}.gallery-error-message{padding:2rem;text-align:center;color:var(--color-secondary)}.gallery-error-icon{font-size:2rem;margin-bottom:1rem}.portfolio-image.loaded [data-placeholder]{opacity:0;pointer-events:none}.portfolio-image>div.loaded{background:transparent}.portfolio-image img{width:100%;height:100%;object-fit:cover;display:block}.portfolio-image>div:not(.loaded){background:var(--color-accent);position:relative}.portfolio-image>div:not(.loaded):before{content:"";position:absolute;top:50%;left:50%;width:1.5rem;height:1.5rem;margin:-.75rem 0 0 -.75rem;border:.125rem solid var(--color-secondary);border-top-color:transparent;border-radius:50%;animation:gallery-loading 1s linear infinite}@keyframes gallery-loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.portfolio-image .error-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--color-secondary);font-family:var(--font-caption);font-size:var(--text-sm);text-align:center;padding:var(--space-md)}.portfolio-image .error-fallback .icon{margin-bottom:var(--space-xs);font-size:1.5rem}.masonry-gallery.loading{opacity:.8}.masonry-gallery.error{border-color:var(--color-warning)}@media (max-width: 47.9375rem){.masonry-gallery{min-height:200px}.portfolio-image>div:hover{transform:none;box-shadow:none}.portfolio-image>div:hover img{transform:none}}@media (min-width: 52.5rem){.masonry-gallery{min-height:300px}}@media (min-width: 75rem){.masonry-gallery{min-height:400px}}.portfolio-image>div:focus{outline:.125rem solid var(--color-interactive);outline-offset:.125rem}.portfolio-image>div:focus-visible{outline:.125rem solid var(--color-interactive);outline-offset:.125rem}@media (prefers-reduced-motion: reduce){.masonry-column{transition:none}.portfolio-image>div{transition:none}.portfolio-image img{transition:none}.portfolio-image>div:hover{transform:none}.portfolio-image>div:hover img{transform:none}.portfolio-image>div:not(.loaded):before{animation:none}}@media (prefers-contrast: high){.masonry-gallery{border-color:currentColor}.portfolio-image>div{border:.0625rem solid currentColor}.portfolio-image>div:focus{outline-width:.1875rem}}@media print{.masonry-gallery{border:none;background:transparent}.portfolio-image>div{break-inside:avoid;border:.0625rem solid #000}.portfolio-image>div:hover{transform:none;box-shadow:none}}.image-viewer{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background-color:var(--background-color, var(--color-pure, #ffffff));color:var(--text-color, var(--color-dark, #000000));transition:opacity .3s ease-out}.image-viewer[data-state=inactive]{display:none;opacity:0;pointer-events:none}.image-viewer[data-state=active]{display:flex;opacity:1;pointer-events:all}.viewer__close{position:fixed;top:1rem;right:1rem;z-index:20;background:#ffffff4d;border:1px solid rgba(0,0,0,.1);color:#0009;cursor:pointer;padding:.5rem;border-radius:50%;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease;opacity:.7}.viewer__close:hover{background:#fff9;border-color:var(--color-interactive);color:var(--color-interactive);opacity:1}[data-theme=dark] .viewer__close{background:#0000004d;border-color:#ffffff1a;color:#fff9}[data-theme=dark] .viewer__close:hover{background:#0009;border-color:var(--color-interactive);color:var(--color-interactive)}.viewer__close:focus-visible{outline:2px solid var(--color-interactive);outline-offset:2px}.viewer__counter{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:20;background:#ffffff4d;border:1px solid rgba(0,0,0,.1);color:#0009;padding:.5rem 1rem;border-radius:1.5rem;font-size:.875rem;font-weight:400;user-select:none;opacity:.7;transition:opacity .2s ease}.viewer__counter:hover{opacity:1;border-color:var(--color-interactive);color:var(--color-interactive)}[data-theme=dark] .viewer__counter{background:#0000004d;border-color:#ffffff1a;color:#fff9}[data-theme=dark] .viewer__counter:hover{border-color:var(--color-interactive);color:var(--color-interactive)}.viewer__content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:0}.viewer__loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;display:none;align-items:center;justify-content:center;color:var(--color-interactive);opacity:.7}.viewer__loading[data-state=active]{display:flex}.viewer__spinner{animation:viewer-spin 1s linear infinite}@keyframes viewer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.viewer__image-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.viewer__image{max-width:100vw;max-height:100vh;width:auto;height:auto;object-fit:contain;object-position:center;display:block;transition:opacity .2s ease-in-out}.viewer__image[data-orientation=landscape]{width:100vw;height:auto}.viewer__image[data-orientation=portrait]{width:auto;height:100vh}.viewer__image[data-orientation=square]{width:100vmin;height:100vmin}.viewer__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:#ffffff4d;border:1px solid rgba(0,0,0,.1);color:#0009;cursor:pointer;padding:.5rem;border-radius:50%;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease;opacity:.7}@media (hover: none) and (pointer: coarse){.viewer__nav{display:none}}.viewer__nav--prev{left:1rem}.viewer__nav--next{right:1rem}.viewer__nav:hover:not(:disabled){background:#fff9;border-color:var(--color-interactive);color:var(--color-interactive);opacity:1}[data-theme=dark] .viewer__nav{background:#0000004d;border-color:#ffffff1a;color:#fff9}[data-theme=dark] .viewer__nav:hover:not(:disabled){background:#0009;border-color:var(--color-interactive);color:var(--color-interactive)}.viewer__nav:focus-visible{outline:2px solid var(--color-interactive);outline-offset:2px}.viewer__nav:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.viewer__nav[aria-disabled=true]{opacity:.3;cursor:not-allowed}@media (prefers-reduced-motion: reduce){.image-viewer,.viewer__image,.viewer__nav,.viewer__close{transition-duration:0ms}.viewer__image{transition:opacity .1s ease-out}}.viewer__image:not([src]){opacity:0}.viewer__close:focus-visible,.viewer__nav:focus-visible{outline:2px solid var(--color-interactive);outline-offset:2px}@media (max-width: 767px){.viewer__counter{font-size:.75rem;padding:.375rem .75rem;bottom:1rem}.viewer__close,.viewer__nav{width:2rem;height:2rem;padding:.375rem}}
