enable stylelint rule for reduced motion blur for home page banner button

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

When adding stylelint recently and in the process of merging #436 (v0.10.0) I wasn't able to resolve this a11y rule for the home page banner component button.

Details

Basically need to be able to uncomment this disable line

/* stylelint-disable a11y/media-prefers-reduced-motion */
:host .btn {
  display: inline-block;
  border-radius: 10px;
  font-size: 1.2rem;
  padding: 0.75rem;
  color: white;
  background-color: #201e2e;
  border: 1px solid white;
  transition: 0.3s;
}

:host .btn:hover,
:host .btn:focus {
  background-color: #425d58;
  border: 1px solid white;
}

and correctly apply the @media rule like seen in banner.css

@media screen and (prefers-reduced-motion: reduce) {
  & span.off {
    animation: none;

    @media (prefers-reduced-motion) {
      animation: 0;
    }
  }
}

_Bonus points: if you like this one, we can also try adding an eslint-lit-a11y plugin as well