Merge pull request #16678 from overleaf/tm-website-redesign-features-card-tweaking

Refactor features-card styling and make some visual tweaks to features-card sections

GitOrigin-RevId: 2220f27f3962abb22243f3559cdcf1a88e5fe202

services/web/frontend/stylesheets/app/homepage.less

@@ -564,13 +564,13 @@
 
   #home-features-arrow-green {
     position: absolute;
-    left: 173px;
-    top: -122px;
+    left: 154px;
+    top: -98px;
 
     @media (max-width: @screen-sm-max) {
       height: 100px;
-      left: 111px;
-      top: -84px;
+      left: 120px;
+      top: -60px;
     }
   }
 

services/web/frontend/stylesheets/app/website-redesign.less

@@ -214,20 +214,14 @@
     flex-wrap: wrap;
     align-items: center;
 
-    .features-card-image {
+    .features-card-media,
+    .features-card-media-right {
+      padding-top: 24px;
+
       img.img-responsive {
         width: 100%;
       }
 
-      @media (max-width: @screen-sm-max) {
-        margin-bottom: 50px;
-      }
-    }
-
-    .features-card-video {
-      display: flex;
-      justify-content: center;
-
       video {
         box-shadow: 0px 4px 6px 0px rgba(30, 37, 48, 0.12),
           0px 8px 16px 0px rgba(30, 37, 48, 0.12);
@@ -236,18 +230,21 @@
         width: 100%;
       }
 
-      video.video-w-md-90 {
-        width: 90%;
-        @media (max-width: @screen-sm-max) {
-          width: 100%;
-        }
-      }
-
       @media (max-width: @screen-sm-max) {
         margin-bottom: 50px;
       }
     }
 
+    @media (min-width: @screen-md-min) {
+      .features-card-media-right {
+        padding-left: 64px;
+      }
+
+      .features-card-media {
+        padding-right: 64px;
+      }
+    }
+
     .features-card-description,
     .features-card-description-list {
       padding-top: 16px;
@@ -322,8 +319,10 @@
   }
 
   .features-card-hero {
-    /* borrow from features-card, but rewrite if needed before adding too many overrides */
-    .features-card;
+    display: flex; /* equal heights */
+    flex-wrap: wrap;
+    align-items: center;
+
     position: relative;
     height: 655px;
     padding-top: @line-height-computed * 2;