diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 00e1f32..ccfe991 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -595,14 +595,14 @@ function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { a
   const nextPageArticles = articles.slice(nextPageStart, nextPageStart + pageSize);
 
   return (
-    <section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
+    <section className="lg:h-full lg:flex lg:flex-col" data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
       {nextPageArticles.length > 0 && (
         <div className="hidden" aria-hidden="true">
           {nextPageArticles.map((a) => a.coverImage && <img key={`preload-${a.id}`} src={a.coverImage} alt="" />)}
         </div>
       )}
       <div
-        className="grid grid-cols-1 lg:grid-cols-5 gap-4 lg:auto-rows-[520px] transition-opacity duration-300"
+        className="grid grid-cols-1 lg:grid-cols-5 lg:grid-rows-1 gap-4 lg:flex-1 lg:min-h-[460px] transition-opacity duration-300"
         style={{ opacity: fading ? 0 : 1 }}
       >
         <div className="lg:col-span-3">
@@ -907,8 +907,11 @@ export default function Home() {
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
-          <div className="lg:col-span-3 space-y-4">
-            <div className="hidden md:block">
+          <div className="lg:col-span-3 space-y-4 lg:flex lg:flex-col">
+            {/* Prej je bila visina karusela fiksna, desni stolpec pa visji —
+                pod karuselom je zato ostal prazen pas. Zdaj se karusel
+                raztegne do visine stranskega stolpca. */}
+            <div className="hidden md:block lg:flex-1 lg:min-h-0">
               <FeaturedCarousel articles={articles.filter(a => a.featured)} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
             </div>
             <MobileMosaic