/* progressive image CSS */
.progressive {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.progressive img {
  border: 0 none;
  padding: 0.25rem;
  /* max-height: 100px; */
  max-width: 100%;
  object-fit: cover;
}

.progressive img.preview {
  filter: blur(0.2vw);
}

.progressive img.preview:has(+img) {
  animation: progressivePreview 0.77s linear;
}

.progressive img.reveal {
  position: absolute;
  animation: progressiveReveal 0.8s linear;
}

@keyframes progressivePreview {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

@keyframes progressiveReveal {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}