/* ============================================
   Image Hover Distortion Component
   Paired with: js/components/image-hover-distortion.js
   ============================================ */

.wrap-img-distortion {
    position: relative;
    overflow: hidden;
    touch-action: none; /* allow pointermove during touch-drag */
}

.wrap-img-distortion img {
    display: block;
    width: 100%;
    height: auto;
}

.wrap-img-distortion .wrap-distort-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wrap-img-distortion .wrap-distort-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}