What is the difference between display: contents and display: none?

display: contents makes the element itself disappear visually and from the layout, but its children are still rendered as if they were direct children of the parent.

With display: none, the element and all its descendants are hidden and inaccessible to interactions and assistive technologies.

With display: contents, the children remain visible and interactive, but the container element itself has no box or styling effect.

display: contents is useful when you want to remove a wrapper element without affecting child elements, whereas display: none is used to hide elements entirely.