diff --git a/packages/documentation/src/components/Card.module.css b/packages/documentation/src/components/Card.module.css
index f2593a83fa8..2994bd1f7f9 100644
--- a/packages/documentation/src/components/Card.module.css
+++ b/packages/documentation/src/components/Card.module.css
@@ -25,28 +25,31 @@
   cursor: pointer;
   text-decoration: none;
   transition: transform 0.15s ease-in-out;
+}
 
-  @media (max-width: 684px) {
+@media (max-width: 684px) {
+  .Card {
     width: 100%;
     margin-right: 0;
   }
+}
 
-  @media (min-width: 664px) and (max-width: 684px) {
+@media (min-width: 664px) and (max-width: 684px) {
+  .Card {
     max-width: 640px;
   }
+}
 
-  @media (min-width: 997px) and (max-width: 1087px) {
+@media (min-width: 997px) and (max-width: 1087px) {
+  .Card {
     width: 100%;
   }
-
-  &:hover {
-    transform: scale(1.07);
-    text-decoration: none !important;
-  }
-
 }
 
-
+.Card:hover {
+  transform: scale(1.07);
+  text-decoration: none !important;
+}
 
 .Card.Auto__Width {
   width: auto;
@@ -62,11 +65,12 @@
   background-color: var(--theme-color-2);
   margin: 0 0 1.25rem 0;
   cursor: pointer;
+}
 
-  @media (min-width: 994px)  {
+@media (min-width: 994px) {
+  .Card_big {
     margin-right: 1.25rem;
   }
-
 }
 
 .Card.With__Icon {
diff --git a/packages/documentation/src/components/Card.tsx b/packages/documentation/src/components/Card.tsx
index ace8f50bd25..27e23499b34 100644
--- a/packages/documentation/src/components/Card.tsx
+++ b/packages/documentation/src/components/Card.tsx
@@ -56,7 +56,6 @@ export function Card(
       )}
       style={props.style}
     >
-
       <div
         className={clsx(styles.Label, 'text-h2', {
           [styles.Full__Height]: !props.icon,
@@ -73,7 +72,6 @@ export function Card(
           </div>
         </>
       ) : null}
-
     </Link>
   );
 }