Update image size.

Author: nikoshell

src/components/card/card.astro

@@ -1,5 +1,6 @@
 ---
 import type { ImageMetadata } from "astro";
+import { Image } from "astro:assets";
 import Button from "@ui/Button.astro";
 
 export interface Props {
@@ -17,8 +18,8 @@ const { title, subtitle, url, image } = Astro.props;
 >
   <a href={url} class="block">
     <div class="relative w-full">
-      <img
-        src={image.src}
+      <Image
+        src={image}
         width={600}
         height={375}
           alt=`Card image - ${title}`

src/components/ui/Headline.astro

@@ -6,7 +6,7 @@ const isAnchor = !!id;
 const isLink = !!href;
 ---
 
-<Tag id={isAnchor ? id : undefined} class={`m-5 py-2 text-center font-bold max-w-[90vw]`}>
+<Tag id={isAnchor ? id : undefined} class={`m-5 py-2 font-bold max-w-[90vw]`}>
   {isAnchor && (
     <a href={`#${id}`} aria-label={`Jump to ${id}`}>
       {Title}

src/pages/speaker/[slug].astro

@@ -97,20 +97,24 @@ function getGitHosting(url: string): string | undefined {
   <article class="pb-12 px-6">
     <Headline as="h1" id="speaker" title={entry.data.name} />
 
+              <div class="md:grid grid-cols-[460px_1fr] md:gap-6">
     {
       ( avatar &&
-        <div class="border-4 border-white rounded-lg shadow-lg inline-block mb-10">
+                  <div class="flex items-start">
+                    <div class="border-4 border-white rounded-lg shadow-lg inline-block mb-10">
           <Picture
             src={avatar}
             alt={entry.data.name}
             inferSize={true}
             height={400}
             width={600}
-            class="max-w-[240px] sm:max-w-[540px] xl:max-w-[620px]  max-h-[240px] sm:max-h-[440px] xl:max-h-[440px] object-scale-down"
+            class="w-full max-w-[240px] sm:max-w-[540px] xl:max-w-[720px]  max-h-[240px] sm:max-h-[440px] xl:max-h-[540px] object-scale-down"
           />
         </div>
+        </div>
       )
     }
+                </div>
 
     {
       entry.data.biography ? (