img.pixel-load--placeholder {
  image-rendering: pixelated;
  object-fit: cover;
  transition: filter 220ms ease, opacity 220ms ease;
}

img.pixel-load--placeholder[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

img.pixel-load--placeholder.pixel-load--pending {
  filter: saturate(1.05) contrast(1.02);
}

img.pixel-load--placeholder.pixel-load--loaded {
  image-rendering: auto;
  filter: none;
}

img.pixel-load--placeholder.pixel-load--audit-hold {
  filter: none;
}

/* The real image failed to load, so the placeholder stays on screen permanently rather than being
   replaced by a broken-image icon. Drop the pixelation hint: at this point the placeholder is the
   final rendered image, not a transitional one. */
img.pixel-load--placeholder.pixel-load--failed {
  image-rendering: auto;
  filter: none;
}

img.pixel-load--lcp-override {
  content-visibility: auto;
}