image to picture, bug fix

src/layouts/BlogLayout.astro

@@ -17,7 +17,7 @@ const { frontmatter } = Astro.props;
         class="text-4xl lg:text-5xl font-bold lg:tracking-tight mt-1 lg:leading-tight">
         {frontmatter.title}
       </h1>
-      <div class="flex gap-2 mt-3 items-center">
+      <div class="flex gap-2 mt-3 items-center flex-wrap md:flex-nowrap">
         <span class="text-gray-400">
           {frontmatter.author}
         </span>
@@ -25,8 +25,8 @@ const { frontmatter } = Astro.props;
         <time class="text-gray-400" datetime={frontmatter.publishDate}>
           {getFormattedDate(frontmatter.publishDate)}
         </time>
-        <span class="text-gray-400">•</span>
-        <div class="flex gap-3">
+        <span class="text-gray-400 hidden md:block">•</span>
+        <div class="w-full md:w-auto flex flex-wrap gap-3">
           {
             frontmatter.tags.map((tag) => (
               <span class="text-sm text-gray-500">#{tag}</span>

src/pages/blog.astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from "@astrojs/image/components";
+import { Picture } from "@astrojs/image/components";
 import Container from "@components/container.astro";
 import Sectionhead from "@components/sectionhead.astro";
 import Layout from "@layouts/Layout.astro";
@@ -30,16 +30,14 @@ console.log(posts[0].frontmatter.image);
             <li>
               <a href={post.url}>
                 <div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center">
-                  <div>
-                    <Image
+                  <Picture
                     src={post.frontmatter.image}
-                      alt="Thumbnail"
-                      width={600}
-                      format="avif"
+                    widths={[400, 800]}
                     aspectRatio="16:9"
+                    sizes="(max-width: 800px) 100vw, 800px"
+                    alt="descriptive text"
                     class="w-full rounded-md"
                   />
-                  </div>
                   <div>
                     <span class="text-blue-400 uppercase tracking-wider text-sm font-medium">
                       {post.frontmatter.category}