@layer components.image{:host{display:block;position:relative}:host([hidden]){display:none}[part=error]{display:none}:host([data-error]) [part=error]{z-index:2;color:var(--ec-image-error-color,#888);background-color:var(--ec-image-error-background,#f4f4f4);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}figcaption[part=caption]{display:none}:host([data-has-caption]) figcaption[part=caption]{margin-top:var(--ec-image-caption-gap,.5rem);color:var(--ec-image-caption-color,#666);font-size:var(--ec-image-caption-size,.875rem);line-height:1.4;display:block}::slotted(picture){display:block}::slotted(img){opacity:0;max-width:100%;height:auto;transition:opacity var(--ec-image-fade-duration,.4s) ease;background-image:var(--ec-image-lqip,none);background-position:50%;background-size:cover;display:block}:host([data-loaded]) ::slotted(img){opacity:1}:host([data-focus=left]) ::slotted(img){object-position:left center}:host([data-focus=right]) ::slotted(img){object-position:right center}:host([data-focus=center]) ::slotted(img){object-position:center}:host([data-lightbox]) ::slotted(img){cursor:zoom-in}[part=lightbox]{background:0 0;border:none;max-width:100vw;max-height:100vh;padding:0;overflow:hidden}[part=lightbox]::backdrop{background-color:var(--ec-image-lightbox-backdrop,rgba(0,0,0,.85))}[part=lightbox-image]{object-fit:contain;cursor:zoom-out;width:auto;max-width:90vw;height:auto;max-height:90vh;display:block}@media (prefers-reduced-motion:reduce){::slotted(img){transition:none}}}