fix: fix grid item size on smaller screens

src/pages/blog/index.tsx

@@ -24,9 +24,15 @@ const Post = ({ size = "normal", post }: PostProps) => {
   `
 
   const featuredImage = getImage(post.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData!)
+  const isHighlight = size === "highlight"
 
   return (
-    <Grid item xs={size === "highlight" ? 12 : 4}>
+    <Grid
+      item
+      xs={12}
+      sm={isHighlight ? 12 : 6}
+      md={isHighlight ? 12 : 4}
+    >
       <Card>
         {featuredImage && (
           <CardMedia

src/pages/index.tsx

@@ -84,7 +84,7 @@ const IndexPage = () => {
     <Layout pageTitle="Home">
       <Grid container spacing={2} alignItems="stretch">
         {content.map(({ title, icon, description }) =>
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <Card>
               <CardContent>
                 <Title Icon={icon} title={title} />