Fine-tune RTL layout

src/css/_base.scss

@@ -20,7 +20,6 @@ html {
     .rtl {
       font-family: "Mada Regular";
       direction: rtl;
-      line-height: 1.8;
     }
     .invisible, .hidden {
       display: none;

src/css/main/SurahStream.scss

@@ -19,19 +19,27 @@ body .root .content.theme {
 }
 
 body .root .content.theme.rtl {
+  ul.body.stream {
+    li.ayah p {
+      line-height: 1.7;
+    }
+  }
   /* <= $breakpoint-sm */
   @media (max-width: $breakpoint-sm) {
     ul.body.stream {
-      li.ayah p { width: 100%; }
+      li.ayah p {
+        width: 100%;
+      }
     }
   }
   /* >= $breakpoint-xxl */
   @media (min-width: $breakpoint-xxl) {
     ul.body.stream {
-      margin-top: 4rem;
+      $gap: 2rem;
+      margin-top: $gap;
       li.ayah {
         font-size: larger;
-        margin-bottom: 2rem;
+        margin-bottom: $gap;
       }
     }
     footer {

src/js/components/SurahStream/Stream.tsx

@@ -25,7 +25,7 @@ export function Stream({ locale, surah, stream, endOfStream, isPaused, t }: Prop
         className={classNames(
           "body stream scroll-y list-none p-0 m-0 h-5/6",
           ...className,
-          { "mt-4": ltr, "mt-12": rtl },
+          { "mt-4": ltr, "mt-6": rtl },
         )}
         ref={ref}
       >