Merge pull request #10520 from overleaf/jel-ds-cms-quote

[web] Add new quote layout option from CMS

GitOrigin-RevId: 63d72f7adf72da231093ab82876173082cd5851c

services/web/frontend/stylesheets/app/cms-page.less

@@ -57,6 +57,7 @@
   */
   blockquote {
     margin: 0;
+    position: relative;
     /*
       type.less sets <p> inline, so that quotation mark is inline
       but sometimes we have multiple <p>,
@@ -87,6 +88,36 @@
       margin-bottom: @margin-sm;
     }
   }
+  .quote-picture-bottom {
+    border: none;
+    color: @content-primary;
+    .h1 {
+      margin: 0 0 48px 0;
+    }
+    p:first-child {
+      &:before {
+        color: inherit;
+        font-size: inherit;
+        margin-right: 0;
+        vertical-align: 0;
+        line-height: inherit;
+        position: absolute;
+        top: (@line-height-computed / 2); // match quote padding
+        left: 3px;
+      }
+      &:after {
+        content: close-quote;
+      }
+    }
+    img {
+      height: 64px;
+      width: 64px;
+      margin-right: 16px;
+    }
+    .quote-by-position {
+      color: @content-secondary;
+    }
+  }
 
   /*
     Tables

services/web/frontend/stylesheets/core/variables.less

@@ -47,6 +47,7 @@
 @brand-danger: @ol-red;
 
 @ol-type-color: @ol-blue-gray-3;
+@content-secondary: @ol-type-color;
 @accent-color-primary: @ol-green;
 @accent-color-secondary: @ol-dark-green;
 
@@ -108,6 +109,7 @@
 @headings-font-weight: 500;
 @headings-line-height: 1.35;
 @headings-color: @gray-dark;
+@content-primary: @headings-color;
 
 //-- Iconography
 //