A decorative overlay — a gradient over an image, a loading shimmer, an icon on top of a button — intercepts every click that lands on it. The usual workarounds are moving it behind with z-index, which changes how it paints, or attaching the handler to the overlay instead, which duplicates logic.
.card__gradient {
position: absolute;
inset: 0;
background: linear-gradient(transparent, rgba(0,0,0,.6));
pointer-events: none;
}
The element still paints; it simply stops being a hit-target, and events pass to whatever is underneath. It inherits, so a child that does need to be clickable must set pointer-events: auto on itself. It is also the cleanest way to disable a control visually and functionally at once, though a real disabled attribute is better for anything focusable.