[ENG-6018] 4-col price cards (#1393)

* 4-col price cards

* +changes

Author: LineIndent

pcweb/pages/pricing/plan_cards.py

@@ -153,12 +153,12 @@ def card(
                     price,
                     color_scheme="gray",
                     size="3",
-                    class_name="font-medium text-lg",
+                    class_name="font-medium 2xl:text-lg text-base w-fit",
                 )
                 if price
                 else rx.fragment()
             ),
-            class_name="flex items-center mb-2 gap-4",
+            class_name="flex 2xl:items-center mb-2 2xl:gap-4 gap-2 2xl:flex-row flex-col",
         ),
         rx.el.p(
             description, class_name="text-sm font-medium text-slate-9 mb-8 text-pretty"
@@ -194,7 +194,7 @@ def card(
             is_external=True,
             underline="none",
         ),
-        class_name="flex flex-col p-8 border border-slate-4 rounded-[1.125rem] shadow-small bg-slate-2 w-full min-w-[20.375rem] h-[33.5rem]",
+        class_name="flex flex-col p-8 border border-slate-4 rounded-[1.125rem] shadow-small bg-slate-2 w-full min-w-0 h-[33.5rem] overflow-hidden",
     )
 
 
@@ -213,19 +213,19 @@ def popular_card(
         rx.box(
             glow(),
             grid(),
-            rx.hstack(
+            rx.el.div(
                 rx.el.h3(title, class_name="font-semibold text-slate-12 text-2xl"),
                 (
                     rx.badge(
                         price,
                         color_scheme="violet",
                         size="3",
-                        class_name="font-medium text-lg",
+                        class_name="font-medium 2xl:text-lg text-base w-fit",
                     )
                     if price
                     else rx.fragment()
                 ),
-                class_name="flex items-center mb-2 gap-4",
+                class_name="flex 2xl:items-center mb-2 2xl:gap-4 gap-2 2xl:flex-row flex-col",
             ),
             rx.el.p(description, class_name="text-sm font-medium text-slate-9 mb-8"),
             rx.el.ul(
@@ -259,7 +259,7 @@ def popular_card(
                 is_external=True,
                 underline="none",
             ),
-            class_name="flex flex-col p-8 border border-[--violet-9] rounded-[1.125rem] w-full min-w-[20.375rem] h-[33.5rem] relative z-[1] backdrop-blur-[6px] bg-[rgba(249,_249,_251,_0.48)] dark:bg-[rgba(26,_27,_29,_0.48)] shadow-[0px_2px_5px_0px_rgba(28_32_36_0.03)] overflow-hidden",
+            class_name="flex flex-col p-8 border border-[--violet-9] rounded-[1.125rem] w-full min-w-0 h-[33.5rem] relative z-[1] backdrop-blur-[6px] bg-[rgba(249,_249,_251,_0.48)] dark:bg-[rgba(26,_27,_29,_0.48)] shadow-[0px_2px_5px_0px_rgba(28_32_36_0.03)] overflow-hidden",
         ),
         class_name="relative",
     )
@@ -334,5 +334,5 @@ def plan_cards() -> rx.Component:
             "Contact sales",
             redirect_url=REFLEX_DEV_WEB_LANDING_FORM_URL_GET_DEMO,
         ),
-        class_name="grid 2xl:grid-cols-4 xl:grid-cols-2 sm:grid-cols-1 gap-4",
+        class_name="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6"
     )