Enhance RTL layouts

src/css/_base.scss

@@ -66,21 +66,4 @@ body .root .content.theme {
  * RTL languages
  */
 body .root .content.theme.rtl {
-  header h1 {
-    font-size: xx-large;
-  }
-
-  /* <= $breakpoint-sm */
-  @media (max-width: $breakpoint-sm) {
-    header h1 {
-      font-size: x-large;
-    }
-  }
-
-  /* <= $breakpoint-xxl */
-  @media (max-width: $breakpoint-xxl) {
-    ul.body {
-      font-size: larger;
-    }
-  }
 }

src/css/main/SurahStream.scss

@@ -21,7 +21,6 @@ body .root .content.theme {
 body .root .content.theme.rtl {
   ul.body.stream {
     li.ayah p {
-      line-height: 1.7;
       max-width: 470px;
     }
   }
@@ -39,14 +38,8 @@ body .root .content.theme.rtl {
       $gap: 2rem;
       margin-top: $gap;
       li.ayah {
-        font-size: larger;
         margin-bottom: $gap;
       }
     }
-    footer {
-      .timer {
-        font-size: larger;
-      }
-    }
   }
 }

src/js/components/SurahStream/Stream.tsx

@@ -39,9 +39,9 @@ export function Stream({
           return (
             <li
               key={ayah.id}
-              className={classNames("ayah fade", { "mb-5": rtl, "mb-4": ltr })}
+              className="ayah fade mb-5"
             >
-              <span className="flex h-8 items-center">
+              <span className={classNames("flex h-8 items-center", {"mb-3": rtl})}>
                 <AudioControl
                   hidden={!(isPaused || endOfStream)}
                   audio={new Audio()}