.photo-gallery-shell{width:100%;max-width:70rem;margin-inline:auto;padding-inline:1.25rem}.photo-view[data-layout=masonry] .icon-masonry,.photo-view[data-layout=square] .icon-grid{display:block}.photo-view[data-layout=square] .photo-container{grid-template-columns:repeat(auto-fit, minmax(var(--min-photo-width), var(--max-photo-width)));gap:var(--photo-gap);justify-content:center;align-items:start;display:grid}.photo-figure{cursor:pointer;outline:none;min-width:0;margin:0}.photo-frame{background-position:50%;background-size:cover;background-image:var(--photo-placeholder);border-radius:.5rem;overflow:hidden}.photo-view[data-layout=masonry] .photo-figure{width:var(--photo-width);height:var(--photo-height);transform:translate(var(--photo-left), var(--photo-top));position:absolute;top:0;left:0}.photo-view[data-layout=masonry] .photo-frame{height:var(--photo-image-height)}.photo-view[data-layout=square] .photo-frame{aspect-ratio:4/3}.photo-frame img{object-fit:cover;width:100%;height:100%;opacity:var(--photo-opacity,0);transition:all .3s ease-in-out;display:block}.photo-figure:hover .photo-frame img,.photo-figure:focus-visible .photo-frame img{transform:scale(1.05)}.photo-figure figcaption{box-sizing:border-box;color:currentColor;opacity:.62;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:3.5rem;padding:.7rem .2rem 0;font-size:.875rem;line-height:1.5;display:-webkit-box;overflow:hidden}.photo-figure:focus-visible .photo-frame{outline-offset:3px;outline:2px solid}@media (width<=31rem){.photo-gallery-shell{padding-inline:.75rem}.photo-view[data-layout=square] .photo-container{grid-template-columns:minmax(0,1fr)}}