From a8704cf6d578be2689ffec5cbd856995c4b7c819 Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Tue, 10 Jan 2023 09:12:27 -0500
Subject: [PATCH] Fix 'Images sometimes not loading in HighlightedPosts'

---
 src/components/blog/GridItem.astro | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/blog/GridItem.astro b/src/components/blog/GridItem.astro
index 492f0ca..95fd1ed 100644
--- a/src/components/blog/GridItem.astro
+++ b/src/components/blog/GridItem.astro
@@ -16,13 +16,15 @@ const image = await findImage(post.image);
 ---
 
 <article class="mb-6 transition">
-  <div class="relative h-0 pb-[56.25%] lg:h-64 overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
+  <div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
     {
       image && (
         <Picture
           src={image}
-          class="object-cover w-full lg:h-64 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
+          class="md:object-cover w-full md:w-auto md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
           widths={[400, 900]}
+          width="400"
+          height="224"
           sizes="(max-width: 900px) 400px, 900px"
           alt={post.title}
           aspectRatio="16:9"