Remove all animations if that's what the user prefers.

public/styles.css

@@ -37,6 +37,17 @@
   }
 }
 
+/**
+ * Remove animations when the user indicates the preference.
+ *
+ * Also on slow updating devices.
+ */
+@media screen and (prefers-reduced-motion: reduce) {
+  * {
+    transition-duration: 0ms !important;
+  }
+}
+
 /* General */
 body {
   background-color: var(--background);
@@ -178,11 +189,6 @@ h4,
 .site-header.open .site-header--menu {
   transform: translateX(0);
 }
-@media screen and (prefers-reduced-motion: reduce), (update: slow) {
-  .site-header--menu {
-    transition-duration: 0ms;
-  }
-}
 .site-header--menu-item .site-header--menu-link {
   color: var(--accent-text);
   display: block;

src/js/web-components/video-card/VideoCard.css

@@ -1,3 +1,14 @@
+/**
+ * Remove animations when the user indicates the preference.
+ *
+ * Also on slow updating devices.
+ */
+ @media screen and (prefers-reduced-motion: reduce) {
+  * {
+    transition-duration: 0ms !important;
+  }
+}
+
 /*
 :host {
   overflow: hidden;

src/js/web-components/video-grid/VideoGrid.css

@@ -1,3 +1,14 @@
+/**
+ * Remove animations when the user indicates the preference.
+ *
+ * Also on slow updating devices.
+ */
+ @media screen and (prefers-reduced-motion: reduce) {
+  * {
+    transition-duration: 0ms !important;
+  }
+}
+
 /* Container */
 .container {
   display: grid;
@@ -27,6 +38,12 @@
   margin: 0;
 }
 
+:host a {
+  display: inline-block;
+  color: var(--accent-text);
+  text-decoration: none;
+}
+
 .section-header a {
   border-radius: 8px;
   color: var(--accent);
@@ -37,12 +54,6 @@
   padding: 10px 0px;
 }
 
-:host a {
-  display: inline-block;
-  color: var(--accent-text);
-  text-decoration: none;
-}
-
 :host a:hover,
 :host a:active {
   text-decoration: underline;
@@ -59,6 +70,12 @@
   .section-header a {
     background: var(--accent-background);
     padding: 10px 20px;
+    transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
+  }
+  .section-header a:hover {
+    text-decoration: none;
+    color: var(--accent-background);
+    background: var(--accent);
   }
 }