make section title size respond to device type

Author: wbglaeser

src/screens/landing-page/components/LandingPageSectionTitle.js

@@ -2,12 +2,17 @@ import HStack from "../../../components/HStack";
 import {Typography} from "@mui/material";
 import VStack from "../../../components/VStack";
 import React from "react";
+import {useStore} from "../../../components/ViewportUpdater";
 
 const LandingPageSectionTitle = ({ title }) => {
+    const isDesktop = useStore((state) => state.isDesktop);
+
+    const fontSize = isDesktop ? '48px' : '32px';
+
     return (
         <VStack>
             <HStack justifyContent={'center'} sx={{width: '100%'}}>
-                <Typography sx={styles.titleText}>
+                <Typography sx={{...styles.titleText, fontSize: fontSize}}>
                     {title}
                 </Typography>
             </HStack>
@@ -18,7 +23,6 @@ const LandingPageSectionTitle = ({ title }) => {
 const styles = {
     titleText: {
         fontWeight: 'bold',
-        fontSize: '48px',
         textAlign: 'center',
         paddingBottom: '2px',
         borderBottom: '2px solid rgba(252, 215, 85)',