diff --git a/attached_assets/image_1772311619284.png b/attached_assets/image_1772311619284.png
new file mode 100644
index 0000000..f3f5066
Binary files /dev/null and b/attached_assets/image_1772311619284.png differ
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index f533d6b..ba98b93 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -42,8 +42,8 @@ function HeroCard({ article }: { article: Article }) {
   const isVideo = article.category === "Video";
   return (
     <Link href={`/article/${article.slug}`}>
-      <div className="relative group cursor-pointer rounded-lg overflow-hidden" data-testid={`card-hero-${article.id}`}>
-        <div className="relative aspect-square">
+      <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid={`card-hero-${article.id}`}>
+        <div className="relative h-full min-h-[300px]">
           <img src={article.coverImage || "/images/article-1.png"} alt={article.title} className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center z-10">
@@ -77,8 +77,8 @@ function GalleryHeroCard({ images }: { images: GalleryImage[] }) {
 
   return (
     <Link href="/gallery">
-      <div className="relative group cursor-pointer rounded-lg overflow-hidden" data-testid="card-hero-gallery">
-        <div className="relative aspect-square">
+      <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid="card-hero-gallery">
+        <div className="relative h-full min-h-[300px]">
           <img src={images[idx].large || images[idx].thumb} alt={images[idx].fileName} className="w-full h-full object-cover absolute inset-0 transition-opacity duration-1000" style={{ objectPosition: "center 25%" }} loading="lazy" />
           <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
           <div className="absolute bottom-0 left-0 right-0 p-5">
@@ -236,14 +236,16 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
   return (
     <section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
       <div className="grid grid-cols-1 lg:grid-cols-8 gap-4">
-        <div className="lg:col-span-3">
-          {isGalleryPage && galleryImages ? (
-            <GalleryHeroCard images={galleryImages.slice(0, 30)} />
-          ) : hero ? (
-            <HeroCard article={hero} />
-          ) : null}
+        <div className="lg:col-span-3 flex">
+          <div className="w-full">
+            {isGalleryPage && galleryImages ? (
+              <GalleryHeroCard images={galleryImages.slice(0, 30)} />
+            ) : hero ? (
+              <HeroCard article={hero} />
+            ) : null}
+          </div>
         </div>
-        <div className="lg:col-span-3 grid grid-cols-1 gap-3">
+        <div className="lg:col-span-3 grid grid-cols-1 gap-3 grid-rows-2">
           {side.map((a) => (
             <SideCard key={a.id} article={a} />
           ))}