Docs accessibility fixes (#919)

* updated Section example to use a background colour with sufficient contrast

* improved styling of torchlight Card example in docs on very small (320px) viewports

* only show a single card in docs torchlight example

apps/docs/content/components/Card/react.mdx

@@ -148,30 +148,21 @@ The color of the lit area corrosponds to the nearest active, primary accent colo
 
 ```jsx live
 <ThemeProvider colorMode="dark">
-  <Box padding="spacious" backgroundColor="default">
-    <Stack direction="horizontal" padding="none">
-      <Card href="https://github.com">
-        <Card.Icon icon={CopilotIcon} color="pink" hasBackground />
-        <Card.Heading>Code search & code view</Card.Heading>
-        <Card.Description>
-          Enables you to rapidly search, navigate, and understand code, right
-          from GitHub.com.
-        </Card.Description>
-      </Card>
-      <Card
-        href="https://github.com"
-        style={{
-          ['--brand-color-accent-primary']: 'var(--base-color-scale-lime-2)',
-        }}
-      >
-        <Card.Icon icon={ZapIcon} color="lime" hasBackground />
-        <Card.Heading>Code search & code view</Card.Heading>
-        <Card.Description>
-          Enables you to rapidly search, navigate, and understand code, right
-          from GitHub.com.
-        </Card.Description>
-      </Card>
-    </Stack>
+  <Box backgroundColor="default" padding="condensed">
+    <Card
+      href="https://github.com"
+      fullWidth
+      style={{
+        ['--brand-color-accent-primary']: 'var(--base-color-scale-lime-2)',
+      }}
+    >
+      <Card.Icon icon={ZapIcon} color="lime" hasBackground />
+      <Card.Heading>Code search & code view</Card.Heading>
+      <Card.Description>
+        Enables you to rapidly search, navigate, and understand code, right from
+        GitHub.com.
+      </Card.Description>
+    </Card>
   </Box>
 </ThemeProvider>
 ```

apps/docs/content/components/Section/react.mdx

@@ -65,12 +65,11 @@ The default `Section` wraps its content in a semantic `<section>` element and pr
 ### With custom background color
 
 ```jsx live
-<Section backgroundColor="#FFF8F8">
+<Section backgroundColor="#2AA198">
   <SectionIntro align="center">
-    <SectionIntro.Heading size="3">Custom background</SectionIntro.Heading>
-    <SectionIntro.Description>
-      This section uses a custom background color.
-    </SectionIntro.Description>
+    <SectionIntro.Heading size="3">
+      Custom background color
+    </SectionIntro.Heading>
   </SectionIntro>
 </Section>
 ```