Declare some image heights for better responsiveness

src/components/ProjectCard.astro

@@ -229,7 +229,7 @@ const link = `/projects/${slugify(project.data.type)}/${slugify(project.data.slu
             loading="lazy"
             layout="constrained"
             fit="cover"
-            height={192}
+            height={250}
             style={`animation-delay: -${Math.floor(Math.random() * (12 - 4) + 4)}s; animation-direction: ${Math.random() < 0.5 ? "normal" : "reverse"};`}
             quality={quality}
           />

src/pages/about.astro

@@ -20,6 +20,7 @@ import { Image } from "astro:assets";
           alt="A photo of Nathan conducting the Woodville Concert Band"
           class="mx-auto mb-8 size-96 rounded-full object-cover drop-shadow-lg/75 transition ease-in-out md:hover:scale-150 md:hover:shadow-xl/50"
           transition:name="aboutImage"
+          height={576}
         />
         <SectionTitle class="py-8">Dr Nathan Cummins</SectionTitle>
         <H2>{site.tagline}</H2>

src/pages/index.astro

@@ -94,6 +94,7 @@ const tracks = (
           alt="Nathan conducting the Woodville Concert Band"
           class="mx-auto mt-8 size-96 rounded-full object-cover drop-shadow-lg/75 transition ease-in-out md:hover:scale-150 md:hover:shadow-xl/50"
           transition:name="aboutImage"
+          height={576}
         />
         <span class="block w-full text-center"
           ><a