fix pricing at home page

apps/homepage/src/components/homepage/sections/PricingSection.module.css

@@ -14,14 +14,15 @@
   margin-inline: auto;
 }
 
+.pricingContainer {
+  inline-size: min(100%, 104rem);
+}
+
 .controls {
   display: grid;
   grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.5fr);
   gap: var(--space-5);
-  position: relative;
-  left: 50%;
-  inline-size: min(100vw - (var(--layout-gutter) * 2), 104rem);
-  transform: translateX(-50%);
+  inline-size: 100%;
   padding: var(--space-5);
   border: 1px solid var(--border-standard);
   border-radius: var(--radius-lg);
@@ -111,12 +112,9 @@
 
 .planGrid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: stretch;
-  position: relative;
-  left: 50%;
-  inline-size: min(100vw - (var(--layout-gutter) * 2), 104rem);
-  transform: translateX(-50%);
+  inline-size: 100%;
   gap: var(--space-5);
 }
 

apps/homepage/src/components/homepage/sections/PricingSection.tsx

@@ -33,7 +33,6 @@ interface PricingSectionProps {
 const accountSubscriptionPlanByPricingPlan: Record<Exclude<PricingPlanId, 'enterprise'>, AccountSubscriptionPlan> = {
   launch: 'STARTER',
   growth: 'GROWTH',
-  pro: 'PRO',
 };
 
 function analyticsContext(
@@ -105,7 +104,7 @@ export function PricingSection({
 
   return (
     <Section id="pricing" className={styles.section} aria-label={content.title}>
-      <Container>
+      <Container className={styles.pricingContainer}>
         <Stack gap="large">
           <SectionHeader
             className={styles.header ?? ''}