hide controls for animation on college homepage when reduced motion i…

…s enabled

src/scss/components/_college-homepage-grid-header.scss

@@ -8,10 +8,11 @@ $text-colors: (
   4: #0d395f
 );
 
+// Accessible versions of the text colors listed above with right contrast ratios
 $accessible-text-colors: (
-  1: #407AB0,
-  2: #737C13,
-  3: #B55F30
+  1: #407ab0,
+  2: #737c13,
+  3: #b55f30
 );
 
 @keyframes homepageFadeInOut {
@@ -339,6 +340,14 @@ $accessible-text-colors: (
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .homepage-title--pause-button,
+  .homepage-title--play-button,
+  .homepage-title--replay-button {
+    display: none !important;
+  }
+}
+
 .pause-animation {
   animation-play-state: paused !important;
 }