:root {
    --pattern-url: none;
    --pattern-color: transparent;
    --pattern-size: 0px 0px;
    --pattern-gradient: linear-gradient(to right, white, white);
    --pattern-rendering: auto;
}

.pattern {
    position: relative;
    z-index: 0;
}

.pattern::before {
    content: ""; 
    position: absolute;
    inset: 0;

    z-index: -1;

    background-color: var(--pattern-color);

    mask-image: var(--pattern-url), var(--pattern-gradient);
    mask-repeat: repeat;
    mask-size: var(--pattern-size), cover;
    mask-composite: intersect;

    image-rendering: var(--pattern-rendering);
    pointer-events: none;
}

a.pattern:hover::before {
    --pattern-color: transparent;
}