.oce-image-hover-swap {
    position: relative;
    display: block;
    width: 100%;
    min-height: 320px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.oce-image-hover-swap,
.oce-image-hover-swap * {
    box-sizing: border-box;
}

.oce-image-hover-swap__stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.oce-image-hover-swap__source,
.oce-image-hover-swap__source img,
.oce-image-hover-swap__stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.oce-image-hover-swap__source {
    display: block;
}

.oce-image-hover-swap__source img {
    display: block;
    object-fit: cover;
    object-position: center;
}

.oce-image-hover-swap__source--secondary {
    opacity: 0;
    pointer-events: none;
}

.oce-image-hover-swap__source--primary {
    opacity: 1;
}

.oce-image-hover-swap__stage canvas {
    display: block;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.oce-image-hover-swap.is-ready .oce-image-hover-swap__stage canvas {
    opacity: 1;
}

.oce-image-hover-swap__displacement {
    display: none;
}