diff --git a/src/index.html b/src/index.html
index 48cb177a32..c2222514d4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -108,7 +108,7 @@
       >
         <img
           src="./images/imac.jpeg"
-          alt="iMac A1419"
+          alt="Image of iMac A1419"
           class="card__image"
         />
 
@@ -147,7 +147,7 @@ <h2 class="card__title">
       <div class="card">
         <img
           src="./images/imac.jpeg"
-          alt="iMac A1419"
+          alt="Image of iMac A1419"
           class="card__image"
         />
 
@@ -185,7 +185,7 @@ <h2 class="card__title">
       <div class="card">
         <img
           src="./images/imac.jpeg"
-          alt="iMac A1419"
+          alt="Image of iMac A1419"
           class="card__image"
         />
 
@@ -223,7 +223,7 @@ <h2 class="card__title">
       <div class="card">
         <img
           src="./images/imac.jpeg"
-          alt="iMac A1419"
+          alt="Image of iMac A1419"
           class="card__image"
         />
 
@@ -261,7 +261,7 @@ <h2 class="card__title">
       <div class="card">
         <img
           src="./images/imac.jpeg"
-          alt="iMac A1419"
+          alt="Image of iMac A1419"
           class="card__image"
         />
 
@@ -299,7 +299,7 @@ <h2 class="card__title">
       <div class="card">
         <img
           src="./images/imac.jpeg"
-          alt="iMac A1419"
+          alt="Image of iMac A1419"
           class="card__image"
         />
 
@@ -337,7 +337,7 @@ <h2 class="card__title">
       <div class="card">
         <img
           src="./images/imac.jpeg"
-          alt="iMac A1419"
+          alt="Image of iMac A1419"
           class="card__image"
         />
 
@@ -375,7 +375,7 @@ <h2 class="card__title">
       <div class="card">
         <img
           src="./images/imac.jpeg"
-          alt="iMac A1419"
+          alt="Image of iMac A1419"
           class="card__image"
         />
 
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss
index 1c72329020..c3ea50483e 100644
--- a/src/styles/blocks/card.scss
+++ b/src/styles/blocks/card.scss
@@ -20,10 +20,6 @@
     margin-top: 40px;
   }
 
-  &:hover &__title {
-    color: $title-hover-color;
-  }
-
   &__image {
     align-self: center;
 
@@ -112,9 +108,13 @@
     line-height: 16px;
 
     &:hover {
-      color: #00acdc;
+      color: $button-text-hover-color;
       background-color: $button-hover-color;
       border: 1px solid $button-main-color;
     }
   }
 }
+
+.card:hover .card__title {
+  color: $title-hover-color;
+}
diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss
index b9a03933d8..e3867c6f83 100644
--- a/src/styles/utils/variables.scss
+++ b/src/styles/utils/variables.scss
@@ -2,6 +2,7 @@ $main-text-color: #060b35;
 $secondary-text-color: #616070;
 $button-main-color: #00acdc;
 $button-hover-color: #fff;
+$button-text-hover-color: #00acdc;
 $nav-link-color: #060b35;
 $nav-link-hover-color: #00acdc;
 $transition-speed: 300ms;