.media-image{position:relative;display:block;min-width:0;overflow:hidden;background:#e9ede3}:where(.media-image){border-radius:inherit}:where(.media-image) img{display:block;width:100%;height:auto;border-radius:inherit}.media-image img{opacity:0}.media-image[data-state=ready]{background:transparent}.media-image[data-state=ready] img{opacity:1;transition:opacity .16s ease-out}.image-loading-placeholder{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:#e9ede3;color:#304c3b;pointer-events:none}.image-loading-placeholder .media-spinner{width:24px;height:24px;max-width:65%;max-height:65%;flex:none}.image-unavailable{padding:8px;font-size:.8rem;text-align:center}.image-loading-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.responsive-image{width:100%;height:100%}.home-cover-thumbnail>.media-image,.media-reuse-preview>.media-image{width:100%;height:100%}.event-cover-grid .media-image{width:100%;aspect-ratio:3 / 2}.image-framing-preview>.media-image{position:absolute;inset:0}.photo-viewport>.media-image{width:100%;height:100%;background:transparent}.photo-viewport .image-loading-placeholder{background:transparent}.media-image.avatar-preview img,.media-image.account-identity-avatar img,.media-image.holder-avatar img,.media-image.member-portrait img,.dog-identity>.media-image img{height:100%;object-fit:cover}@media(prefers-reduced-motion:reduce){.media-image[data-state=ready] img{transition:none}.image-loading-placeholder .media-spinner{animation:none}}.member-identity{display:inline-flex;align-items:center;gap:9px;min-width:0;max-width:100%;vertical-align:middle;text-align:left}.member-identity .member-portrait{flex:0 0 30px;width:30px;height:30px;border-radius:50%;object-fit:cover}.member-identity-text{min-width:0;overflow-wrap:anywhere}.member-identity-text small{display:block;color:var(--muted);font-size:.78rem}.member-picker{min-width:0}.media-filters>.member-picker{flex:1;min-width:min(180px,100%)}.media-filters .member-picker label{min-width:0}.member-picker .selected-references>span,.notification-compose .selected-references>span{max-width:100%;min-width:0;padding-inline-start:5px}.member-picker .selected-references button,.notification-compose .selected-references button{flex:none}.member-picker .selector-results button,.notification-compose .selector-results button{display:flex;align-items:center;gap:12px;min-height:48px}.notification-compose .selector-results .member-identity{display:inline-flex}.notification-compose .selector-results .member-identity-text{display:block}
