html.has-js .article-image img,
html.has-js .author-avatar img {
  transition: opacity 160ms ease;
}

html.has-js .author-avatar {
  position: relative;
  overflow: hidden;
}

html.has-js .author-avatar:not(.is-loaded) {
  background: var(--blue);
}

html.has-js .author-avatar:not(.is-loaded)::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--paper);
}

html.has-js .article-image:not(.is-loaded) {
  background:
    linear-gradient(135deg, rgba(0, 30, 255, 0.08), transparent 42%),
    linear-gradient(90deg, rgba(0, 30, 255, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(0, 30, 255, 0.12) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 32px 32px, 32px 32px;
}

html.has-js .article-image:not(.is-loaded)::before {
  content: "Artikelbild";
  display: block;
}

html[lang="en"].has-js .article-image:not(.is-loaded)::before {
  content: "Article image";
}

html.has-js .article-image:not(.is-loaded) img,
html.has-js .author-avatar:not(.is-loaded) img {
  opacity: 0;
}

html.has-js .article-image.is-loaded img,
html.has-js .author-avatar.is-loaded img {
  opacity: 1;
}