.wp-block-image.ci3m-mask-columns img,
.wp-block-image.ci3m-mask-circle img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}


.wp-block-image.ci3m-mask-columns img {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 756 756'%3E%3Cg transform='matrix(1,0,0,1,-4157.48,-6141.73)'%3E%3Cpath fill='%23fff' d='M4251.97,6803.15L4203.04,6803.15C4177.89,6803.15 4157.48,6782.74 4157.48,6757.59L4157.48,6232.44C4157.48,6182.38 4198.13,6141.73 4248.19,6141.73L4537.12,6141.73C4562.26,6141.73 4582.68,6162.15 4582.68,6187.29L4582.68,6188.98C4582.68,6215.05 4603.85,6236.22 4629.92,6236.22L4867.83,6236.22C4892.97,6236.22 4913.39,6256.63 4913.39,6281.78L4913.39,6806.93C4913.39,6856.99 4872.74,6897.64 4822.68,6897.64L4344.77,6897.64C4319.62,6897.64 4299.21,6877.23 4299.21,6852.08L4299.21,6850.39C4299.21,6824.32 4278.04,6803.15 4251.97,6803.15Z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 756 756'%3E%3Cg transform='matrix(1,0,0,1,-4157.48,-6141.73)'%3E%3Cpath fill='%23fff' d='M4251.97,6803.15L4203.04,6803.15C4177.89,6803.15 4157.48,6782.74 4157.48,6757.59L4157.48,6232.44C4157.48,6182.38 4198.13,6141.73 4248.19,6141.73L4537.12,6141.73C4562.26,6141.73 4582.68,6162.15 4582.68,6187.29L4582.68,6188.98C4582.68,6215.05 4603.85,6236.22 4629.92,6236.22L4867.83,6236.22C4892.97,6236.22 4913.39,6256.63 4913.39,6281.78L4913.39,6806.93C4913.39,6856.99 4872.74,6897.64 4822.68,6897.64L4344.77,6897.64C4319.62,6897.64 4299.21,6877.23 4299.21,6852.08L4299.21,6850.39C4299.21,6824.32 4278.04,6803.15 4251.97,6803.15Z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;


    mask-mode: luminance;

    animation: maskSlide 3s infinite alternate ease-in-out;
}


/* 2) KÖR – tisztán CSS gradient (nincs extra fájl) */
.wp-block-image.ci3m-mask-circle img {
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 70%, transparent 71%);
    mask-image: radial-gradient(circle at 50% 50%, black 70%, transparent 71%);
}

/* Opcionális: ha a forma NE torzuljon, fix 1:1 */
/*
.wp-block-image.ci3m-mask-columns,
.wp-block-image.ci3m-mask-circle { aspect-ratio: 1 / 1; }
.wp-block-image.ci3m-mask-columns img,
.wp-block-image.ci3m-mask-circle  img { height:100%; object-fit:cover; }
*/

@keyframes maskSlide {
    0% {
        -webkit-mask-position: 0% 50%;
        mask-position: 0% 50%;
    }

    100% {
        -webkit-mask-position: 100% 50%;
        mask-position: 100% 50%;
    }
}

/* Ha méretet akarsz lélegeztetni: */
@keyframes maskPulse {
    0% {
        -webkit-mask-size: 90% 90%;
        mask-size: 90% 90%;
    }

    100% {
        -webkit-mask-size: 110% 110%;
        mask-size: 110% 110%;
    }
}