From a6904ed59667d9b192edcb161fcf6b41b77a763e Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Tue, 16 Jul 2024 12:13:46 -0500
Subject: [PATCH] Website: update space between sections on landing pages.
 (#20510)

Closes: #20495
Changes:
- Updated the space between sections on the endpoint ops and
vulnerability management pages.
---
 website/assets/styles/pages/endpoint-ops.less | 28 ++++++++++++-------
 .../pages/vulnerability-management.less       | 28 ++++++++++++-------
 website/views/pages/endpoint-ops.ejs          |  6 ++--
 .../views/pages/vulnerability-management.ejs  | 12 ++++----
 4 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/website/assets/styles/pages/endpoint-ops.less b/website/assets/styles/pages/endpoint-ops.less
index 6ddf31696ef8..52cdb203514c 100644
--- a/website/assets/styles/pages/endpoint-ops.less
+++ b/website/assets/styles/pages/endpoint-ops.less
@@ -408,11 +408,15 @@
       margin-bottom: 24px;
     }
   }
-  [purpose='feature-image'].left {
-    margin-left: 24px;
+  [purpose='feature'].flex-column {
+    [purpose='feature-text'] {
+      margin-left: 48px;
+    }
   }
-  [purpose='feature-image'].right {
-    margin-right: 24px;
+  [purpose='feature'].flex-column-reverse {
+    [purpose='feature-text'] {
+      margin-right: 48px;
+    }
   }
   [purpose='feature-image'] {
     max-width: 380px;
@@ -610,6 +614,16 @@
     [purpose='feature-text'] {
       width: unset;
     }
+    [purpose='feature'].flex-column {
+      [purpose='feature-text'] {
+        margin-left: auto;
+      }
+    }
+    [purpose='feature'].flex-column-reverse {
+      [purpose='feature-text'] {
+        margin-right: auto;
+      }
+    }
     [purpose='feature'] {
       margin-bottom: 120px;
     }
@@ -617,12 +631,6 @@
       margin-left: auto;
       margin-right: auto;
       margin-bottom: 60px;
-      &.left {
-        margin-left: auto;
-      }
-      &.right {
-        margin-right: auto;
-      }
     }
     [purpose='testimonial-videos'] {
       margin-left: auto;
diff --git a/website/assets/styles/pages/vulnerability-management.less b/website/assets/styles/pages/vulnerability-management.less
index cd64ee5553c7..17a15041784e 100644
--- a/website/assets/styles/pages/vulnerability-management.less
+++ b/website/assets/styles/pages/vulnerability-management.less
@@ -351,11 +351,15 @@
     }
   }
 
-  [purpose='feature-image'].left {
-    margin-left: 24px;
+  [purpose='feature'].flex-column {
+    [purpose='feature-text'] {
+      margin-left: 48px;
+    }
   }
-  [purpose='feature-image'].right {
-    margin-right: 24px;
+  [purpose='feature'].flex-column-reverse {
+    [purpose='feature-text'] {
+      margin-right: 48px;
+    }
   }
   [purpose='feature-image'] {
     max-width: 380px;
@@ -539,17 +543,21 @@
     [purpose='feature'] {
       margin-bottom: 120px;
     }
-    [purpose='feature-image'] {
-      margin-left: auto;
-      margin-right: auto;
-      margin-bottom: 60px;
-      &.left {
+    [purpose='feature'].flex-column {
+      [purpose='feature-text'] {
         margin-left: auto;
       }
-      &.right {
+    }
+    [purpose='feature'].flex-column-reverse {
+      [purpose='feature-text'] {
         margin-right: auto;
       }
     }
+    [purpose='feature-image'] {
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 60px;
+    }
     [purpose='hero-image'] {
       margin-bottom: 60px;
     }
diff --git a/website/views/pages/endpoint-ops.ejs b/website/views/pages/endpoint-ops.ejs
index 7a5bbd81c93d..fa80f91e7d41 100644
--- a/website/views/pages/endpoint-ops.ejs
+++ b/website/views/pages/endpoint-ops.ejs
@@ -128,7 +128,7 @@
         </div>
         <p purpose="feature-footnote">*Coming soon</p>
       </div>
-      <div purpose="feature-image" class="left">
+      <div purpose="feature-image">
         <img alt="Ship data to any platform" src="/images/device-management-clickops-or-devops-380x280@2x.png">
       </div>
     </div>
@@ -194,7 +194,7 @@
           <p>Ease your logging burden, pull the data you need.</p>
         </div>
       </div>
-      <div purpose="feature-image" class="left">
+      <div purpose="feature-image">
         <img alt="Ship data to any platform" src="/images/endpoint-ops-feature-image-1-381x282@2x.png">
       </div>
     </div>
@@ -230,7 +230,7 @@
     </div>
     <%-  partial('../partials/calendar-banner.partial.ejs') %>
     <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
-      <div purpose="feature-image" class="right">
+      <div purpose="feature-image">
         <img alt="Ship data to any platform" src="/images/endpoint-ops-feature-image-2-380x380@2x.png">
       </div>
       <div purpose="feature-text" class="d-flex flex-column">
diff --git a/website/views/pages/vulnerability-management.ejs b/website/views/pages/vulnerability-management.ejs
index 5b2c4fc9d4ef..833a0abe044f 100644
--- a/website/views/pages/vulnerability-management.ejs
+++ b/website/views/pages/vulnerability-management.ejs
@@ -52,7 +52,7 @@
       <logo-carousel></logo-carousel>
 
     <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
-      <div purpose="feature-image" class="right">
+      <div purpose="feature-image">
         <img alt="Report what matters" src="/images/vuln-management-feature-image-5-380x312@2x.png">
       </div>
       <div purpose="feature-text" class="d-flex flex-column">
@@ -75,13 +75,13 @@
           <p>Automatically match CVEs to your operating systems, apps, extensions, browser plugins, Python libraries, everything.</p>
         </div>
       </div>
-      <div purpose="feature-image" class="left">
+      <div purpose="feature-image">
         <img alt="Deep context from the environment" src="/images/vuln-management-feature-image-4-380x270@2x.png">
       </div>
     </div>
 
     <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
-      <div purpose="feature-image" class="right">
+      <div purpose="feature-image">
         <img alt="Untangle your security stack" src="/images/vuln-management-feature-image-3-380x320@2x.png">
       </div>
       <div purpose="feature-text" class="d-flex flex-column">
@@ -106,13 +106,13 @@
           <p>Deep-link live data with internal IT and platform teams.</p>
         </div>
       </div>
-      <div purpose="feature-image" class="right">
+      <div purpose="feature-image">
         <img alt="Mitigate CVEs automatically" src="/images/vuln-management-feature-image-1-380x281@2x.png">
       </div>
     </div>
     <%-  partial('../partials/calendar-banner.partial.ejs') %>
     <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
-      <div purpose="feature-image" class="left">
+      <div purpose="feature-image">
         <img alt="Up-to-date data without scans" src="/images/vuln-management-feature-image-2-380x323@2x.png">
       </div>
       <div purpose="feature-text" class="d-flex flex-column">
@@ -120,7 +120,7 @@
         <p>Traditional network vulnerability scans can clog your network and even haunt your printers with pages full of wingdings. Fleet does things differently.</p>
         <div purpose="checklist" class="flex-column d-flex">
           <p>Eliminate the risk of side effects from scanning the network.</p>
-<p>Lightweight enough for the most brittle environments (OT, data centers, embedded/BTS, low-latency gaming servers).</p>
+          <p>Lightweight enough for the most brittle environments (OT, data centers, embedded/BTS, low-latency gaming servers).</p>
           <p>Quickly pull data about important CVEs and zero days during an incident or audit.</p>
         </div>
       </div>