💄 Update styles for responsiveness

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>
   );

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: 640px) {
     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: 640px) {
+    width: 75%;
   }
 }
 
@@ -79,8 +67,3 @@
   border-radius: 1.5rem;
   background-color: var(--text-primary-light);
 }
-
-.description {
-  width: 100%;
-  text-wrap: wrap;
-}