Render correct hero text field and basic typography styles

components/modules/hero/hero.tsx

@@ -57,9 +57,11 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
           </Text>
         )}
         {text && (
-          <Text className="mt-4" variant="paragraph">
+          <div className="prose prose-lg mt-4 lg:prose-xl">
-            {label}
+            <Text className="" variant="paragraph">
-          </Text>
+              {text}
+            </Text>
+          </div>
         )}
         {link?.reference && (
           <Link

tailwind.config.js

@@ -99,6 +99,20 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      typography: {
+        DEFAULT: {
+          css: {
+            color: 'var(--text-high-contrast)',
+            a: {
+              textDecoration: 'underline',
+              color: '#3182ce',
+              '&:hover': {
+                color: '#2c5282',
+              },
+            },
+          },
+        },
+      },
     },
   },
   plugins: [