.oi-progressive {
    display: block;
    overflow: hidden;
    position: relative;
}

.oi-progressive > .oi-full {
    display: block;
    height: 100%;
    width: 100%;
}

.oi-progressive .oi-full-image,
.oi-progressive .oi-placeholder {
    transition: opacity 420ms ease, filter 420ms ease, transform 150ms cubic-bezier(.4,0,.2,1);
}

.oi-progressive .oi-full-image {
    opacity: 0;
}

.oi-progressive .oi-placeholder {
    filter: blur(18px);
    height: 100%;
    inset: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
}

.oi-progressive[data-progressive-state='loaded'] .oi-full-image {
    opacity: 1;
}

.oi-progressive[data-progressive-state='loaded'] .oi-placeholder {
    filter: blur(0);
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .oi-progressive .oi-full-image,
    .oi-progressive .oi-placeholder {
        transition: none;
    }
}