<h2>Pointer</h2>
<div class="container">
    <div class="box pointer none">none</div>
    <div class="box pointer coarse">coarse</div>
    <div class="box pointer fine">fine</div>
</div>
<h2>Hover</h2>
<div class="container">
    <div class="box m-hover none">none</div>
    <div class="box m-hover hover">hover</div>
</div>
<h2>Any-Pointer</h2>
<div class="container">
    <div class="box any-pointer none">none</div>
    <div class="box any-pointer coarse">coarse</div>
    <div class="box any-pointer fine">fine</div>
</div>
<h2>Any-Hover</h2>
<div class="container">
    <div class="box any-hover none">none</div>
    <div class="box any-hover hover">hover</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.box {
    display: flex;
    width: 100px;
    height: 100px;
    justify-content: center;
    align-items: center;
    background: #aaa;
}

@media (pointer: none) {
    .pointer.none {
        background: #d28aff;
    }
}

@media (pointer: coarse) {
    .pointer.coarse {
        background: #d28aff;
    }
}

@media (pointer: fine) {
    .pointer.fine {
        background: #d28aff;
    }
}

@media (hover: none) {
    .m-hover.none {
        background: #d28aff;
    }
}

@media (hover: hover) {
    .m-hover.hover {
        background: #d28aff;
    }
}

@media (any-pointer: none) {
    .any-pointer.none {
        background: #d28aff;
    }
}

@media (any-pointer: coarse) {
    .any-pointer.coarse {
        background: #d28aff;
    }
}

@media (any-pointer: fine) {
    .any-pointer.fine {
        background: #d28aff;
    }
}

@media (any-hover: none) {
    .any-hover.none {
        background: #d28aff;
    }
}

@media (any-hover: hover) {
    .any-hover.hover {
        background: #d28aff;
    }
}