/* Skeleton / shimmer enquanto `js-lazy-image` aguarda `data-src` (transparent gif mostra o fundo). */
.js-lazy-image {
  opacity: 0.92;
  transition: opacity 0.35s ease;
  background-color: #e8eaed;
  background-image: linear-gradient(
    90deg,
    #e8eaed 0%,
    #f3f4f6 45%,
    #e8eaed 90%
  );
  background-size: 200% 100%;
  animation: lazy-image-loading 1.25s ease-in-out infinite;
}

.js-lazy-image.is-loaded {
  opacity: 1;
  animation: none;
  background-color: transparent;
  background-image: none;
}

.js-lazy-image.is-error {
  opacity: 1;
  animation: none;
  background-color: transparent;
  background-image: none;
}

@keyframes lazy-image-loading {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-lazy-image {
    animation: none;
    background-image: none;
    background-color: #ececec;
  }

  .js-lazy-image.is-loaded {
    opacity: 1;
  }
}