Merge pull request #2890 from appwrite/fix-reduce-layout-shift-in-blogs

fix: layout shift in blogs

Author: HarshMN2345

src/lib/components/Article.svelte

@@ -22,10 +22,10 @@
 </script>
 
 <li>
-    <a class="block overflow-hidden rounded-lg bg-transparent" {href}>
+    <a class="block w-full overflow-hidden rounded-lg bg-transparent" {href}>
         <Media
             src={cover}
-            class="aspect-video transition-transform duration-250 hover:scale-105"
+            class="web-u-media-ratio-16-9 w-full transition-transform duration-250 hover:scale-105"
             alt={title}
             autoplay
             controls={false}

src/lib/components/blog/article.svelte

@@ -21,10 +21,10 @@
 </script>
 
 <div class="group flex w-full flex-col gap-8 pb-3 transition">
-    <a class="block overflow-hidden rounded-lg bg-transparent" {href}>
+    <a class="block w-full overflow-hidden rounded-lg bg-transparent" {href}>
         <Media
             src={cover}
-            class="aspect-video transition duration-250 ease-in-out group-hover:scale-105"
+            class="web-u-media-ratio-16-9 w-full transition duration-250 ease-in-out group-hover:scale-105"
             alt={title}
         />
     </a>

src/routes/blog/[[page]]/+page.svelte

@@ -222,11 +222,11 @@
                         <article class="web-feature-article mt-12">
                             <a
                                 href={featured.href}
-                                class="web-feature-article-image h-fit overflow-hidden rounded-lg"
+                                class="web-feature-article-image block w-full overflow-hidden rounded-lg"
                             >
                                 <img
                                     src={featured.cover}
-                                    class="aspect-video transition-transform duration-250 hover:scale-102"
+                                    class="web-u-media-ratio-16-9 w-full transition-transform duration-250 hover:scale-102"
                                     loading="lazy"
                                     alt="cover"
                                 />