From 31ffc12c360be7a33d91f010efd97e1bd84d57d2 Mon Sep 17 00:00:00 2001
From: Petter Hohle <petter.hohle@gmail.com>
Date: Thu, 5 Dec 2024 10:18:16 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Update=20styles=20for=20responsi?=
 =?UTF-8?q?veness?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../employeeHighlight/EmployeeHighlight.tsx   |  4 +-
 .../employeeHighlight.module.css              | 43 ++++++-------------
 2 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/src/components/sections/employeeHighlight/EmployeeHighlight.tsx b/src/components/sections/employeeHighlight/EmployeeHighlight.tsx
index f971b151f..77af34328 100644
--- a/src/components/sections/employeeHighlight/EmployeeHighlight.tsx
+++ b/src/components/sections/employeeHighlight/EmployeeHighlight.tsx
@@ -25,9 +25,7 @@ export default function EmployeeHighLight({ section }: EmployeeHighlightProps) {
             </Text>
           </div>
         </div>
-        <Text type={"bodyNormal"} className={styles.description}>
-          {section.description}
-        </Text>
+        <Text type={"bodyNormal"}>{section.description}</Text>
       </div>
     </div>
   );
diff --git a/src/components/sections/employeeHighlight/employeeHighlight.module.css b/src/components/sections/employeeHighlight/employeeHighlight.module.css
index 753ab218e..689bb03f8 100644
--- a/src/components/sections/employeeHighlight/employeeHighlight.module.css
+++ b/src/components/sections/employeeHighlight/employeeHighlight.module.css
@@ -2,43 +2,31 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  padding: 2rem 0.375rem 0.375rem 0.375rem;
-  max-width: 68rem;
+  padding: 0 2rem;
+  max-width: 64rem;
   margin: 5rem auto;
-  border-radius: 0.375rem;
   gap: 1.5rem;
   color: var(--text-primary);
 
-  @media (max-width: 1024px) {
+  @media (max-width: 750px) {
     flex-direction: column;
+    margin-left: 2rem;
+    margin-right: 2rem;
   }
 }
 
 .image {
-  border-radius: 0.75rem;
-  overflow: hidden;
-
-  min-width: 150px;
-  max-width: 15rem;
-
-  @media (min-width: 640px) {
-    min-width: 240px;
-    max-width: 21.25rem;
-  }
-
-  @media (min-width: 1024px) {
-    min-width: 260px;
-    max-width: 21.25rem;
-  }
+  min-width: 15rem;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
 
-  @media (min-width: 1400px) {
-    min-width: 360px;
-    max-width: 27.5rem;
+  & img {
+    border-radius: 0.375rem;
   }
 
-  @media (min-width: 1800px) {
-    min-width: 460px;
-    max-width: 33.75rem;
+  @media (max-width: 750px) {
+    width: 60%;
   }
 }
 
@@ -79,8 +67,3 @@
   border-radius: 1.5rem;
   background-color: var(--text-primary-light);
 }
-
-.description {
-  width: 100%;
-  text-wrap: wrap;
-}