Fix block reward styling on Mobile

apps/block_scout_web/assets/css/components/_animations.scss

@@ -1,7 +1,17 @@
 @keyframes fade-in {
-  0% {transform: scale(0.97); opacity: 0;}
+  0% {
-  50% {transform: scale(1);}
+    transform: scale(0.97);
-  100% {transform: scale(1); opacity: 1;}
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 @keyframes fade-up-blocks-chain {
@@ -11,9 +21,11 @@
     opacity: 0;
     overflow-x: hidden;
   }
+
   50% {
     opacity: 0;
   }
+
   100% {
     flex-basis: 25%;
     width: 25%;
@@ -27,10 +39,12 @@
     height: 0;
     opacity: 0;
   }
+
   25% {
     opacity: 0;
     transform: translateY(10px) scale(0.97);
   }
+
   100% {
     height: 100%;
     opacity: 1;
@@ -43,6 +57,7 @@
     transform: scale(1);
     opacity: 1;
   }
+
   100% {
     opacity: 0;
     transform: scale(0.75);
@@ -68,7 +83,7 @@
   animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 
   @media (max-width: 767px) {
-    max-height: 234px;
+    max-height: 300px;
     animation: fade-up--mobile 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
 }
@@ -76,4 +91,4 @@
 .shrink-out {
   transform-origin: bottom center;
   animation: shrink-out 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
-}
+}