finish creating the grid for the cards

client/src/components/profile/components/portfolio.css

@@ -1,46 +1,71 @@
 .portfolio-container {
   display: grid;
   grid-template-columns: 300px repeat(2, 1fr);
-  grid-template-rows: 0.1fr 1fr;
   position: relative;
   gap: 0.5rem;
   margin-top: 1em;
   margin-bottom: 3em;
-  zoom: 1;
-  overflow: hidden;
-}
-.portfolio-container h3 {
-  grid-column: 2;
-  grid-row: 1;
 }
 
-.portfolio-container a {
-  grid-column: 3;
-  grid-row: 1;
-}
-
-.screen-shot-container {
-  grid-column: 1;
-  grid-row: 1 / 3;
-}
 .portfolio-screen-shot {
   width: 100%;
   height: 100%;
+  max-height: 300px;
   display: block;
 }
-.portfolio-container p {
-  grid-column: 2/-1;
-  grid-row: 2/-1;
-  word-break: break-word;
+
+.screen-shot-container {
+  grid-column: 1/ -1;
+  grid-row: 1;
 }
 
-.portfolio-container a::before {
+.portfolio-container h3 {
+  font-size: 1.5rem;
+  margin-top: 0.25em;
+  grid-column: 1/ 1;
+  grid-row: 2;
+}
+
+.portfolio-container p {
+  grid-column: 1/ -1;
+  grid-row: 3;
+  word-break: break-all;
+}
+
+@media (min-width: 768px) {
+  .portfolio-container {
+    grid-template-rows: 0.1fr 1fr;
+  }
+
+  .screen-shot-container {
+    grid-column: 1;
+    grid-row: 1 / 3;
+  }
+
+  .portfolio-container h3 {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .portfolio-container p {
+    grid-column: 2 / -1;
+    grid-row: 2;
+  }
+}
+
+.portfolio-container a {
   content: '';
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
-  z-index: 999;
+  z-index: 1;
+}
+
+.portfolio-container a:hover,
+.portfolio-container a:focus {
+  background-color: revert;
+  outline: 3px solid var(--blue-mid);
 }
 
 /* Timeline pagination */

client/src/components/profile/components/portfolio.tsx

@@ -22,16 +22,12 @@ function Portfolio({ portfolio = [] }: PortfolioProps): JSX.Element | null {
         <div className='portfolio-container' key={id}>
           <div className='screen-shot-container'>
             {image && (
-              <img
-                alt={t('profile.screen-shot', { title: title })}
-                className='portfolio-screen-shot'
-                src={image}
-              />
+              <img alt='' className='portfolio-screen-shot' src={image} />
             )}
           </div>
           <h3>{title}</h3>
           <a href={url} rel='nofollow noopener noreferrer'>
-            live URL <span className='sr-only'>for {title}</span>
+            <span className='sr-only'>live URL for {title}</span>
           </a>
           <p>{description}</p>
         </div>