fix: change project card orientation to portrait for mobile

frontend/components/projects/ProjectCard.tsx

@@ -59,10 +59,10 @@ export default function ProjectCard(
       href={projectUrl()}
       className={`flex flex-col h-full bg-base-200 text-content ${opacity} hover:bg-secondary hover:text-white`}
       passHref>
-      <article className="flex flex-1 h-full px-4 gap-4 overflow-hidden">
+      <article className="flex-1 flex flex-col md:flex-row h-full p-4 gap-4 overflow-hidden">
         <section
           title={subtitle ?? title}
-          className="flex-[2] py-4 h-full"
+          className="flex-[3] md:flex-[2] h-full"
           >
           <ImageAsBackground
             alt={title}
@@ -73,7 +73,7 @@ export default function ProjectCard(
             noImgMsg='no image'
           />
         </section>
-        <section className="flex-[3] flex flex-col py-4">
+        <section className="flex-[3] flex flex-col">
           <h2
             title={title}
             className={`max-h-[6rem] overflow-clip ${titleMargin}`}>

frontend/pages/projects/index.tsx

@@ -44,8 +44,9 @@ export default function ProjectsIndexPage(
   const router = useRouter()
   // use media query hook for small screen logic
   const smallScreen = useMediaQuery('(max-width:600px)')
-  // adjust grid min width for mobile
+  // adjust grid width and height for mobile
   const minWidth = smallScreen ? '18rem' : '29rem'
+  const itemHeight = smallScreen ? '23rem' : '17rem'
 
   // console.log('ProjectsIndexPage...domains...', domains)
 
@@ -141,7 +142,7 @@ export default function ProjectsIndexPage(
 
       <ProjectsGrid
         projects={projects}
-        height='17rem'
+        height={itemHeight}
         minWidth={minWidth}
         maxWidth='1fr'
         className="gap-[0.125rem] p-[0.125rem] pt-4 pb-12"