@layer components{.photo{display:block;& .photo__frame{block-size:100%}& .photo__slot{display:flex;flex-direction:column;gap:var(--space-2xs);align-items:center;justify-content:center;block-size:100%;padding:var(--space-s);color:var(--color-accent-deep);text-align:center}& .photo__icon{font-size:1.75rem;opacity:.55}& .photo__alt{max-inline-size:28ch;font-size:var(--size-step--1);line-height:1.35}& .photo__note{font-size:var(--size-step--2);letter-spacing:var(--tracking-caption);text-transform:uppercase;opacity:.7}& .photo__caption{display:block;margin-block-start:var(--space-2xs)}& [data-ratio=landscape]{aspect-ratio:16/9}& [data-ratio=wide]{aspect-ratio:16/10}& [data-ratio=square]{aspect-ratio:1/1}& [data-ratio=portrait]{aspect-ratio:3/4}& [data-ratio=tall]{aspect-ratio:4/5}& [data-ratio=banner]{aspect-ratio:16/7}&[data-size=thumb]{inline-size:3rem;flex-shrink:0;& .photo__slot{padding:0}& .photo__alt, & .photo__note{display:none}& .photo__icon{font-size:1rem}}}}