:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  /**
   * @prop --padding: padding around any content. Only relevant when using `background` attribute. Defaults to `0`.
  */
  --padding: 0;
  display: inline-block;
  object-fit: cover;
  object-position: center;
  background-size: cover;
  background-position: center;
}
:host * {
  border-radius: inherit;
}

:host([background]:not([background=false])) {
  display: block;
}

.img {
  position: relative;
  object-fit: inherit;
  object-position: inherit;
  background-color: inherit;
  background-position: inherit;
  background-size: inherit;
  background-origin: inherit;
  background-attachment: inherit;
  background-repeat: inherit;
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  min-block-size: inherit;
  min-inline-size: inherit;
  block-size: inherit;
  inline-size: inherit;
  max-block-size: inherit;
  max-inline-size: inherit;
  aspect-ratio: inherit;
}

.img__loader,
.img__observer {
  position: absolute;
  inset: 0;
  block-size: 100%;
  inline-size: 100%;
  z-index: -1;
}

.img__image,
.img__bg {
  border-radius: inherit;
  display: block;
  opacity: 0;
  transition: 0.5s ease opacity, 0.3s ease filter 0.4s;
  filter: blur(5px);
  flex: 1;
}
.img__image.loaded,
.img__bg.loaded {
  opacity: 1;
  filter: blur(0);
}
@media not all and (resolution >= 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .img__image.loaded,
    .img__bg.loaded {
      filter: blur(0);
    }
  }
}

.img__image {
  object-fit: inherit;
  object-position: inherit;
  min-block-size: inherit;
  min-inline-size: inherit;
  block-size: inherit;
  inline-size: inherit;
  max-block-size: inherit;
  max-inline-size: inherit;
  aspect-ratio: inherit;
}
.img__image.hide {
  visibility: hidden;
}
.img__image.hide.no-height {
  block-size: 1px;
  position: absolute;
  z-index: -1;
}

.img__bg {
  background-color: inherit;
  background-position: inherit;
  background-size: inherit;
  background-origin: inherit;
  background-attachment: inherit;
  background-repeat: inherit;
  overflow: auto;
  padding: var(--padding);
}
.img__bg.no-height {
  position: absolute;
  inset: 0;
}