From d7a4f3dc46f4b2a6253e61a0185b74a7a4508be0 Mon Sep 17 00:00:00 2001
From: Vincent Voyer <vincent@codeagain.com>
Date: Thu, 25 Jul 2024 18:24:49 +0200
Subject: [PATCH] feat(design): Show carousel above the fold on desktop (#1363)

* feat(design): Show carousel above the fold on desktop

Before this commit, we would not see the carousel without scrolling. The top
images are so big that take most of the space. This made the website looked a
bit weird, thus I am proposing this change.

* uneeded
---
 components/grid/three-items.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
index 3f513b94d..76df2ae4f 100644
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@@ -52,7 +52,7 @@ export async function ThreeItemGrid() {
   const [firstProduct, secondProduct, thirdProduct] = homepageItems;
 
   return (
-    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2">
+    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2 lg:max-h-[calc(100vh-200px)]">
       <ThreeItemGridItem size="full" item={firstProduct} priority={true} />
       <ThreeItemGridItem size="half" item={secondProduct} priority={true} />
       <ThreeItemGridItem size="half" item={thirdProduct} />