/* VideoVault: term_note module (loaded only when it renders; tokens and shared parts are in base.css). */
/* A topic's own photo with the owner's note at the top of its page. Narrow: photo first, full width. */
.vvault-front .vvault-tnote{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem 1.5rem;margin:1rem 0 0;align-items:start}
.vvault-front .vvault-tnote .vvault-note{margin:0}
.vvault-front .vvault-tphoto{margin:0;min-width:0}
.vvault-front .vvault-tphoto__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 50%;border-radius:3px;background:var(--vv-soft)}
/* A person: keep the top of the picture, so faces are not cropped away. An explicit focal point (inline style) wins. */
.vvault-front .vvault-tphoto--person .vvault-tphoto__img{object-position:50% 12%}
.vvault-front .vvault-tphoto .vvault-credit{margin:.375rem 0 0;color:var(--vv-muted)} /* Under the photo, on the page, so not the base's white-on-photo credit. */
/* Wide: the note on the left, the photo on the right (the photo comes first in the markup, for the narrow layout). */
@container vv (min-width:640px){
.vvault-front .vvault-tnote:has(.vvault-note){grid-template-columns:minmax(0,1fr) minmax(0,22rem)}
.vvault-front .vvault-tnote:has(.vvault-note) .vvault-tphoto{grid-column:2;grid-row:1}
.vvault-front .vvault-tnote:has(.vvault-note) .vvault-note{grid-column:1;grid-row:1}
.vvault-front .vvault-tphoto__img{aspect-ratio:4/3}
.vvault-front .vvault-tnote:not(:has(.vvault-note)) .vvault-tphoto{max-width:28rem}
}