[Stage] MWPW-140084 - Margin is not proper and 'See it in action' and…

… arrow are overlapped for GenFill Marquee for RTL locales (#133)

Bug fix - margin and enticement for RTL locales
Also added pointer on genfill image hover
Resolves: MWPW-140084

Test URLs:

Before: https://www.stage.adobe.com/ae_ar/creativecloud/animation/discover/testdraftsfirefly/genfill/genfill-container3.html
After: https://stage-genfill--cc--adobecom.hlx.page/drafts/drashti/MWPW-137345/final-genfill/genfill-container3?martech=off

creativecloud/blocks/interactive-marquee/milo-marquee.css

@@ -28,6 +28,7 @@
   position: relative;
   top: 63px; /* mobile */
   margin: 0 auto;
+  cursor: pointer;
 }
 
 .interactive-marquee .text {
@@ -38,6 +39,10 @@
   order: 2;
 }
 
+[dir="rtl"] .interactive-marquee .text {
+  margin: 0 auto 0 0;
+}
+
 .interactive-marquee .text p:last-of-type {
   margin-bottom: 0;
 }

creativecloud/features/genfill/genfill-interactive.css

@@ -29,7 +29,7 @@
   position: absolute;
   font-size: 28px;
   line-height: 35px;
-  margin-left: -20px;
+  margin: 40px 0 16px -20px;
   top: -90px;
   color: var(--color-white);
 }
@@ -65,7 +65,7 @@
 
   .enticement-arrow {    
     right: 575px;
-    top: -45px;
+    top: -30px;
     display: block;
   }
 
@@ -74,7 +74,8 @@
   }
 
   [dir="rtl"] .enticement-text {
-    margin-right: 525px;
+    position: absolute;
+    left: var(--spacing-xxs);
   }
 }
 
@@ -90,7 +91,7 @@
 
   .enticement-arrow {
     right: 575px;
-    top: -45px;
+    top: -30px;
     display: block;
   }
 
@@ -99,6 +100,7 @@
   }
 
   [dir="rtl"] .enticement-text {
-    margin-right: 510px;
+    position: absolute;
+    left: var(--spacing-xxs);
   }
 }