.photo-view{--photo-media-max:56rem;--photo-caption-max:22rem;--photo-controls-gutter:3.75rem;inline-size:min(100%, var(--photo-media-max));grid-template-columns:minmax(0,1fr);justify-items:center;gap:1rem;margin-block:0;margin-inline:auto;display:grid}.photo-view.is-portrait{--photo-media-max:44rem}.photo-media{inline-size:100%;min-inline-size:0;padding-inline:var(--photo-controls-gutter);position:relative}.photo-stage{border:1px solid var(--line);background:var(--panel);padding:.35rem}.photo-stage>img{block-size:auto;inline-size:100%;display:block}.photo-caption{background:var(--panel);border-left:3px solid var(--teal);inline-size:min(100%,70ch);min-inline-size:0;padding:.8rem 1rem}.photo-caption>:first-child{margin-top:0}.photo-caption>:last-child{margin-bottom:0}.photo-credit{color:var(--muted);font-size:.85rem}.photo-steps{pointer-events:none;position:absolute;inset:0}.photo-step{pointer-events:auto;position:absolute;top:calc(50% - 28px)}.photo-step .btn-face{place-items:center;min-width:44px;min-height:56px;padding:.35rem;display:grid}.photo-previous{left:0}.photo-next{right:0}.photo-navigation{flex-wrap:wrap;gap:1rem;margin-top:1.5rem;display:flex}.photo-navigation .back{margin-top:0}@media (width>=1100px){.photo-view.is-portrait{inline-size:min(100%, calc(var(--photo-media-max) + var(--photo-caption-max) + 1rem));grid-template-columns:minmax(0, 1fr) var(--photo-caption-max);align-items:start}.photo-view.is-portrait .photo-caption{inline-size:100%}}@media screen and (width<=40rem){.photo-view{--photo-controls-gutter:0rem}.photo-media{gap:.75rem;display:grid}.photo-stage{border-inline:0;padding-inline:0}.photo-steps{pointer-events:auto;justify-content:space-between;align-items:center;gap:1rem;padding-inline:.75rem;display:flex;position:static}.photo-step{position:static}.photo-next{margin-inline-start:auto}.photo-caption{border-inline:0;inline-size:100%}.photo-navigation{margin-inline:.75rem}}