/* Overlays are out of flow: media proportions, links and image fit stay intact. */
.kf-image-position { position: relative; }
.kf-image-cover {
  position: absolute;
  z-index: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 8px;
  box-sizing: border-box;
  border-radius: inherit;
  background: rgba(246, 246, 246, .94);
  color: #656565;
  pointer-events: none;
  user-select: none;
}
.kf-image-spinner {
  display: block;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 2px solid #d8d8d8;
  border-top-color: #6c6c6c;
  border-radius: 50%;
  animation: kf-image-turn .8s linear infinite;
}
.kf-image-error { display: none; font-size: 12px; line-height: 1.4; text-align: center; }
.kf-image-cover[data-state="error"] { background: #f6f6f6; }
.kf-image-cover[data-state="error"] .kf-image-spinner { display: none; animation: none; }
.kf-image-cover[data-state="error"] .kf-image-error { display: block; }
.kf-image-small .kf-image-spinner { width: 18px; height: 18px; }
.kf-image-small .kf-image-error { font-size: 10px; line-height: 1.2; }
.kf-image-frame > [data-lightbox-close] { z-index: 2; }
@keyframes kf-image-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kf-image-spinner { animation: none; }
}