[web] plans-2026: responsive card layout (mobile 1-col, md 2-col, lg 4-col) (#32905)

* plans-2026: wrap cards to 2-col at md, 4-col at lg

Replaces horizontal scroll at md/lg with a wrapping CSS grid so cards
stack in rows instead of requiring horizontal scrolling. The 4-column
layout now kicks in at lg (~992px) rather than xl (~1200px).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* plans-2026: replace mobile horizontal scroll with 1-col stack

Removes the overflow-x scroll behaviour at xs/sm (and the
scrollbar-overlap margin/padding hack that came with it). Cards now
stack in a single column on small screens, consistent with the
2-col/4-col grid above.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix lint

* plans-2026: fix student mode 2-col at lg, remove mobile min-width

Student-mode 2-col override was only kicking in at xl; move it to lg so
the two visible cards (free + student) fill the row correctly. Also drop
the 280px min-width on .plans-card-col — now that mobile uses a 1-col
grid instead of horizontal scroll, it causes unnecessary overflow on
narrow viewports.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Update breakpoint for plans cards layout to lg for improved responsiveness

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
GitOrigin-RevId: 5ef923dd3795353bd946c1857e78f4b5f7063ab0

services/web/frontend/stylesheets/pages/plans-2026.scss

@@ -176,10 +176,8 @@
         display: none;
       }
 
-      @include media-breakpoint-up(xl) {
+      @include media-breakpoint-up(lg) {
         .plans-cards-row-wrapper {
-          grid-auto-columns: auto;
-          grid-auto-flow: row;
           grid-template-columns: repeat(2, minmax(0, 1fr));
         }
       }
@@ -187,37 +185,21 @@
 
     .plans-cards-row-wrapper {
       display: grid;
-      grid-auto-flow: column;
-      grid-auto-columns: 90%;
+      grid-template-columns: 1fr;
       grid-template-rows: 1fr auto auto auto;
-      column-gap: var(--spacing-04);
-      overflow-x: auto;
+      gap: var(--spacing-04) var(--spacing-04);
       padding-top: var(--spacing-08);
-      -webkit-overflow-scrolling: touch;
-
-      // so the scrollbar doesn't overlap the last card's content
-      margin-bottom: calc(-1 * var(--spacing-05));
-      padding-bottom: var(--spacing-05);
 
       @include media-breakpoint-up(md) {
-        grid-auto-columns: 60%;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
       }
 
       @include media-breakpoint-up(lg) {
-        grid-auto-columns: 50%;
-      }
-
-      @include media-breakpoint-up(xl) {
-        grid-auto-columns: auto;
-        grid-auto-flow: row;
         grid-template-columns: repeat(4, minmax(0, 1fr));
-        overflow-x: visible;
-        padding-bottom: 0;
       }
 
-      // When #32905 lands (responsive card grid), move this breakpoint to lg.
       &.plans-cards-row-auto-fit {
-        @include media-breakpoint-up(xl) {
+        @include media-breakpoint-up(lg) {
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         }
       }
@@ -227,11 +209,6 @@
       display: grid;
       grid-row: span 4;
       grid-template-rows: subgrid;
-      min-width: 280px;
-
-      @include media-breakpoint-up(xl) {
-        min-width: 0;
-      }
     }
 
     .price-plan-card {