:host { display: block; position: relative; font: var(--lampeya-website-host-font); width: 100%; height: 100%; aspect-ratio: 3/2; }
.frame { position: absolute; inset: 0; overflow: hidden; background: var(--lampeya-website-frame-background); }
img { width: 100%; height: 100%; object-fit: cover; }
.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lampeya-website-label-gap); text-align: center; padding: var(--lampeya-space-3); box-sizing: border-box; }
.empty svg { opacity: .45; width: calc(var(--lampeya-space-6) + var(--lampeya-space-1)); height: calc(var(--lampeya-space-6) + var(--lampeya-space-1)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cap { max-width: 90%; font-weight: var(--lampeya-weight-medium); letter-spacing: var(--lampeya-website-hero-title-letter-spacing); opacity: .75; }
.ring { position: absolute; inset: 0; pointer-events: none; border: var(--lampeya-website-ring-border); opacity: .35; }
:host([data-filled]) .empty, :host([data-filled]) .ring { display: none; }
:host([data-filled]) img { display: block; }