Merge pull request #16797 from overleaf/mf-fix-premium-label-not-inline

[website-redesign] Make the premium label inline to fix styling for the very small screen.

GitOrigin-RevId: 71246b2ea11cf6f6369185d798f89e7bf8b757ff

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

@@ -265,8 +265,24 @@
         margin-top: 4px;
         display: block;
       }
+    }
+
+    .features-card-description {
+      h3 {
+        font-size: 1.5rem;
+        line-height: 1.4;
+        margin-bottom: 8px;
+      }
+    }
 
-      ul {
+    .features-card-description-list {
+      h3 {
+        font-size: 1.875rem;
+        line-height: 1.5;
+      }
+
+      ul.list-simple-text,
+      ul.list-heading-text {
         list-style-type: none;
         padding: 0;
         margin: 0;
@@ -275,47 +291,30 @@
           margin-bottom: 12px;
           font-size: 1.125rem;
           line-height: 1.333;
-          // flex is needed in the case of "premium" label being on the same line
           display: flex;
 
+          .label-premium {
+            margin-left: 0;
+          }
+
           @media (max-width: @screen-sm-max) {
             font-size: 1rem;
             line-height: 1.375;
-
-            // only for label-premium that appears directly as a child of li
-            > .label-premium {
-              align-self: center;
-            }
           }
+        }
+      }
 
+      ul.list-heading-text {
+        li {
           h4 {
             margin-top: 0;
             margin-bottom: 8px;
             font-size: 20px;
             font-weight: 600;
           }
-
-          p {
-            margin-bottom: 0;
-          }
         }
       }
     }
-
-    .features-card-description {
-      h3 {
-        font-size: 1.5rem;
-        line-height: 1.4;
-        margin-bottom: 8px;
-      }
-    }
-
-    .features-card-description-list {
-      h3 {
-        font-size: 1.875rem;
-        line-height: 1.5;
-      }
-    }
   }
 
   .features-card-hero {
@@ -861,20 +860,6 @@
     max-width: 64px;
   }
 
-  .premium-badge {
-    .premium-badge-img {
-      margin-left: 10px;
-    }
-
-    @media (max-width: @screen-xs-max) {
-      display: flex;
-      .premium-badge-img {
-        width: 87px;
-        margin-left: auto;
-      }
-    }
-  }
-
   .responsive-button-container {
     display: flex;
     margin-top: 24px;