fix: image sizings

app/about/page.tsx

@@ -50,7 +50,7 @@ export default function About() {
             Thank you for visiting!
           </p>
         </div>
-        <ExportedImage
+        <img
           className="about-portrait"
           src={portrait.src}
           alt="author portrait"
@@ -72,8 +72,10 @@ export default function About() {
               >
                 <ExportedImage
                   className="about-snippet-icon"
-                  src={snippet.icon?.src}
+                  src={snippet.icon!.src}
                   alt={snippet.title ? snippet.title : ""}
+                  width={snippet.icon!.width}
+                  height={snippet.icon!.height}
                 />
               </Link>
             ) : (
@@ -84,6 +86,8 @@ export default function About() {
               className="about-snippet-icon"
               src={snippet.icon!.src}
               alt={snippet.title ? snippet.title : ""}
+              width={snippet.icon!.width}
+              height={snippet.icon!.height}
             />
           ) : (
             <Fragment />

components/Card.tsx

@@ -11,7 +11,11 @@ interface CardProps {
 export default function Card({ slug, title, imageUrl }: CardProps) {
   return (
     <figure className="rec-card">
-      <ExportedImage src={imageUrl} alt={title} />
+      <ExportedImage 
+      src={imageUrl} 
+      width={500}
+      height={500}
+      alt={title} />
       <figcaption className="rec-desc">
         <p className="rec-name">{title}</p>
         <Link href={slug} className="rec-button">

styles/layout/_recipe-card.scss

@@ -6,6 +6,7 @@
 
   img {
     display: block;
+    width: 100%;
   }
 
   .rec-desc {

styles/pages/_about.scss

@@ -39,6 +39,8 @@
     .about-snippet-icon {
       max-width: max(60%, 12em);
       max-height: 4em;
+      width: auto;
+      height: auto;
       pointer-events: visible;
     }
   }