feat: implement reduced-motion variant

components/BlogList.js

@@ -53,6 +53,13 @@ const BlogList = ({ posts }) => {
             transform: translateX(10px);
             transition: transform 0.5s ease-out;
           }
+          @media (prefers-reduced-motion) {
+            a:hover li .blog__info h2,
+            a:hover li .blog__info h3,
+            a:hover li .blog__info p {
+              transform: translateX(0px);
+            }
+          }
           .hero_image {
             width: 100%;
             height: 33vh;

components/Meta.js

@@ -145,6 +145,12 @@ export default function Meta(props) {
             font-size: 0.85rem;
             line-height: 1.45rem;
           }
+          @media (prefers-reduced-motion) {
+            * {
+              transition: none !important;
+            }
+          }
+
            {
             /* //TYPOGRAPHY------------------------------------- */
           }