Website redesign - Fixing premium badges and buttons on mobile design (#16718)

* fixing premium badge display on every page

* Aligning header sections and fixing buttons

This aligns the header section to the left on mobile layouts
This also fixes the buttons width on mobile layouts

GitOrigin-RevId: 795af064989272969a5707c086b422b4be58ec25

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

@@ -710,6 +710,21 @@
     }
   }
 
+  .heading-section-md-align-left {
+    @media (max-width: @screen-md-min) {
+      display: flex;
+      flex-direction: column;
+      align-items: baseline;
+
+      h2 {
+        text-align: left;
+      }
+      p {
+        text-align: left;
+      }
+    }
+  }
+
   .mono-text {
     font-family: 'DM Mono', monospace;
     color: var(--green-60);
@@ -857,14 +872,18 @@
       justify-content: center;
     }
 
-    @media (max-width: @screen-sm-max) {
-      flex-direction: column-reverse;
-      width: 100%;
+    &.align-left-button-sm {
+      @media (max-width: @screen-sm-max) {
+        justify-content: start;
+      }
     }
   }
 
   .label-premium {
     height: 20px; // override default height
+  }
+
+  .label-premium-block-md {
     @media (max-width: @screen-md-max) {
       display: block;
       width: fit-content;