fix articles design

Author: aster-void

src/components/ArticleList.astro

@@ -53,7 +53,7 @@ const articlesWithExcerpts = await Promise.all(
           <a
             href={`/articles/${article.id}`}
             class:list={[
-              "relative rounded-xl bg-gray-50 p-1 shadow-md grayscale-50 duration-300 hover:grayscale-0 active:top-0.5",
+              "relative rounded-xl bg-gray-50 p-1 shadow-md hover:shadow-gray-400 hover:brightness-110 active:top-0.5",
               additionalProps.cellClassName,
             ]}
           >

src/pages/articles/[article].astro

@@ -36,7 +36,7 @@ if (article.data.author && !author)
         <Picture
           loading="eager"
           formats={["avif", "webp"]}
-          class="mx-auto max-h-400 max-w-md lg:rounded-2xl"
+          class="mx-auto md:max-w-xl md:rounded-2xl"
           alt="イメージ画像"
           src={article.data.image}
         />
@@ -45,7 +45,7 @@ if (article.data.author && !author)
   }
   <div
     id="meta"
-    class="mx-auto mt-4 flex max-w-xl flex-wrap justify-around px-4 align-middle sm:gap-8 lg:mt-24"
+    class="mx-auto mt-4 flex max-w-xl flex-wrap justify-around px-4 align-middle sm:gap-8"
   >
     {
       author && (
@@ -74,7 +74,7 @@ if (article.data.author && !author)
       {format(article.data.date, "yyyy-MM-dd")}
     </time>
   </div>
-  <main class="mx-auto lg:mt-12">
+  <main class="mx-auto">
     <h1 class="mx-auto my-8 max-w-2xl px-8 text-center text-2xl lg:text-3xl">
       {article.data.title}
     </h1>