Remove @mixin hover and similar media queries and use hoverOnlyWhenSupported

[stephiescastle]

Description

TailwindCSS has introduced a new option to only hover when supported, which solves the same issue our hover mixin solves.

We also added these custom media queries:

theme: {
  screens: {
    'can-hover': { raw: '(hover: hover)' },
    'no-hover': { raw: '(hover: none)' }
  }
}

I propose we remove the scss mixin and custom media queries and use the new setting in our configuration

// tailwind.config.js
module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  }
}