Align content pages with landing grid

src/components/LegalPage/LegalPage.module.css

@@ -1,12 +1,10 @@
 .page {
   min-height: 100vh;
-  background:
-    radial-gradient(circle at 50% 0%, light-dark(rgba(34, 139, 230, 0.12), rgba(34, 139, 230, 0.16)), transparent 34rem),
-    light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
 }
 
 .shell {
-  padding-top: var(--mantine-spacing-lg);
+  padding-top: var(--mantine-spacing-md);
   padding-bottom: calc(var(--mantine-spacing-xl) * 2);
 }
 
@@ -29,13 +27,13 @@
 }
 
 .main {
-  width: min(100%, 820px);
-  margin: 0 auto;
-  padding-top: 76px;
+  width: 100%;
+  padding-top: 96px;
 }
 
 .intro {
-  padding: 0 var(--mantine-spacing-md) calc(var(--mantine-spacing-xl) * 1.5);
+  max-width: 900px;
+  padding-bottom: 64px;
 }
 
 .title {
@@ -49,17 +47,15 @@
 }
 
 .document {
-  padding: 44px 48px 52px;
-  background: light-dark(rgba(255, 255, 255, 0.9), rgba(20, 21, 23, 0.9));
-  border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
-  backdrop-filter: blur(12px);
+  padding-bottom: 72px;
 }
 
 .lead {
+  max-width: 780px;
   margin: 0;
   color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
-  font-size: var(--mantine-font-size-lg);
-  line-height: 1.65;
+  font-size: 20px;
+  line-height: 1.6;
 }
 
 .text,
@@ -88,20 +84,27 @@
 }
 
 .section {
-  margin-top: 42px;
-  padding-top: 36px;
+  display: grid;
+  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
+  gap: 52px;
+  margin-top: 56px;
+  padding-top: 48px;
   border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
 }
 
 .sectionTitle {
-  margin: 0 0 var(--mantine-spacing-md);
+  margin: 0;
   color: light-dark(var(--mantine-color-dark-9), var(--mantine-color-white));
   font-family: Outfit, var(--mantine-font-family);
-  font-size: clamp(22px, 3vw, 28px);
+  font-size: clamp(26px, 3vw, 34px);
   font-weight: 500;
   line-height: 1.25;
 }
 
+.sectionContent {
+  min-width: 0;
+}
+
 .document a {
   color: light-dark(var(--mantine-color-blue-7), var(--mantine-color-blue-3));
   text-underline-offset: 3px;
@@ -122,18 +125,24 @@
 }
 
 .footer {
-  margin-top: 72px;
   padding-top: var(--mantine-spacing-lg);
   border-top: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
 }
 
 @media (max-width: 48em) {
   .main {
-    padding-top: 52px;
+    padding-top: 72px;
   }
 
-  .document {
-    padding: 32px 24px 40px;
+  .intro {
+    padding-bottom: 48px;
+  }
+
+  .section {
+    grid-template-columns: 1fr;
+    gap: var(--mantine-spacing-md);
+    margin-top: 44px;
+    padding-top: 36px;
   }
 }
 
@@ -147,15 +156,6 @@
     flex-direction: column;
   }
 
-  .intro {
-    padding-inline: 0;
-  }
-
-  .document {
-    margin-inline: calc(var(--mantine-spacing-xs) * -1);
-    padding-inline: 20px;
-  }
-
   .footer {
     align-items: flex-start;
     flex-direction: column;

src/components/LegalPage/LegalPage.tsx

@@ -45,7 +45,7 @@ export function LegalPage({
 
     return (
         <Box className={classes.page}>
-            <Container size="lg" className={classes.shell}>
+            <Container className={classes.shell}>
                 <Group component="header" justify="space-between" className={classes.header}>
                     <Anchor
                         component={Link}
@@ -91,15 +91,9 @@ export function LegalPage({
                         )}
                     </Box>
 
-                    <Paper
-                        component="article"
-                        radius="lg"
-                        withBorder
-                        shadow="sm"
-                        className={classes.document}
-                    >
+                    <Box component="article" className={classes.document}>
                         {children}
-                    </Paper>
+                    </Box>
                 </Box>
 
                 <Group component="footer" justify="space-between" className={classes.footer}>
@@ -132,7 +126,7 @@ export function LegalSection({ title, children }: LegalSectionProps) {
             <Title order={2} className={classes.sectionTitle}>
                 {title}
             </Title>
-            {children}
+            <Box className={classes.sectionContent}>{children}</Box>
         </Box>
     );
 }