:host {
  display: grid;
  overflow: hidden;
  isolation: isolate;
}

:where(img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

:where([part="image"]) {
  opacity: 0;

  &.loaded {
    animation-name: var(--image-sizes-animation-name, fadeIn);
    animation-fill-mode: both;
    animation-duration: var(--image-sizes-animation-duration, 1s);

    & + [part="placeholder"] {
      opacity: 0;
    }
  }
}

:where([part="placeholder"]) {
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  filter: blur(var(--responsive-img-blur, 1rem));
  transition: opacity var(--responsive-img-animation-duration, 1s) ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}