.mvplzl.mvplzl__image.mvplzl__image--blurhash {
    position: relative
}

.mvplzl.mvplzl__image.mvplzl__image--blurhash.format-square {
    --aspect-ratio: 1 / 1 !important;
    --height-percent: 100% !important
}

.mvplzl.mvplzl__image.mvplzl__image--blurhash.format-landscape {
    --aspect-ratio: 3 / 2 !important;
    --height-percent: 66.67% !important
}

.mvplzl.mvplzl__image.mvplzl__image--blurhash.format-portrait {
    --aspect-ratio: 2 / 3 !important;
    --height-percent: 50% !important;
}

.mvplzl.mvplzl__image.mvplzl__image--blurhash::before {
    content: '';
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: var(--height-percent)
}

@supports (aspect-ratio: 1/2) and (aspect-ratio: var(--dummy)) {
    .mvplzl.mvplzl__image.mvplzl__image--blurhash::before {
        content:unset
    }
}

.mvplzl.mvplzl__image.mvplzl__image--blurhash canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    pointer-events: none;
    z-index: 10
}

.mvplzl.mvplzl__image.mvplzl__image--blurhash img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

@supports (aspect-ratio: 1/2) and (aspect-ratio: var(--dummy)) {
    .mvplzl.mvplzl__image.mvplzl__image--blurhash img {
        position:relative;
        top: unset;
        left: unset;
        height: unset;
        aspect-ratio: var(--aspect-ratio);
    }
}

.mvplzl.mvplzl__image.mvplzl__image--blurhash[data-mvplzl--lazy-load-status='loaded'] canvas {
    opacity: 0;
}

.mvplzl.mvplzl__image.mvplzl__image--blurhash[data-mvplzl--lazy-load-status='loaded'] img {
    opacity: 1;
    height: 100%;
}