From aef68c0464504f3e1432e151a7cd05f19c06e464 Mon Sep 17 00:00:00 2001
From: Mikael Brevik <mikaelbre@gmail.com>
Date: Thu, 12 Dec 2024 20:39:47 +0100
Subject: [PATCH] fix: improves top info section in case and on smaller screens

---
 .../projectInfo/customerCaseProjectInfo.module.css   | 12 ++++--------
 src/utils/hooks/useScrollDirection.ts                |  1 -
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
index 6ca3e25dd..a96673156 100644
--- a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
+++ b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
@@ -1,21 +1,18 @@
 .projectInfo {
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 1rem;
+  row-gap: 3rem;
   width: 100%;
   max-width: var(--max-content-width-medium);
 
-  @media (max-width: 425px) {
-    flex-direction: column;
-    gap: 3rem;
-  }
+  margin: var(--padding-m) auto;
 }
 
 .projectInfoInner {
   gap: 1.5rem;
   display: flex;
   flex-direction: column;
-  width: 50%;
 }
 
 .badgeWrapper {
@@ -70,7 +67,6 @@
   flex-direction: column;
   gap: 1.5rem;
   flex-wrap: wrap;
-  width: 50%;
 }
 
 .preFancyCharacter {
diff --git a/src/utils/hooks/useScrollDirection.ts b/src/utils/hooks/useScrollDirection.ts
index b955d57f6..998f02701 100644
--- a/src/utils/hooks/useScrollDirection.ts
+++ b/src/utils/hooks/useScrollDirection.ts
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 
 export default function useScrollDirection() {
   const [scrollDirection, setScrollDirection] = useState<string | null>(null);
-
   useEffect(() => {
     let lastScrollY = window.scrollY;