From 57a3b834b7077263ee1a451055eb86ada43836b8 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Tue, 23 Jan 2024 14:55:49 -0700
Subject: [PATCH] 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
---
 .../frontend/stylesheets/app/homepage.less    |  8 ++--
 .../stylesheets/app/website-redesign.less     | 37 +++++++++----------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/services/web/frontend/stylesheets/app/homepage.less b/services/web/frontend/stylesheets/app/homepage.less
index 5aa47cdcc5..c561d437a6 100644
--- a/services/web/frontend/stylesheets/app/homepage.less
+++ b/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;
     }
   }
 
diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less
index c40e69e3b2..46a1792677 100644
--- a/services/web/frontend/stylesheets/app/website-redesign.less
+++ b/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;