💄 Update styles

varianter · Dec 4, 2024 · bf32d55 · bf32d55
1 parent 12bf529
commit bf32d55
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 35 deletions.
diff --git a/src/components/sections/employeeHighlight/EmployeeHighlight.tsx b/src/components/sections/employeeHighlight/EmployeeHighlight.tsx
@@ -14,8 +14,8 @@ export default function EmployeeHighLight({ section }: EmployeeHighlightProps) {
       <div className={styles.image}>
         <SanityImage image={section.employeePhoto} />
       </div>
-      <div>
-        <div className={styles.titleSection}>
+      <div className={styles.textContainer}>
+        <div className={styles.titleContainer}>
           <Text type={"h5"} className={styles.title}>
             {section.basicTitle}
           </Text>

diff --git a/src/components/sections/employeeHighlight/employeeHighlight.module.css b/src/components/sections/employeeHighlight/employeeHighlight.module.css
@@ -14,7 +14,41 @@
   }
 }
 
-.titleSection {
+.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;
+  }
+
+  @media (min-width: 1400px) {
+    min-width: 360px;
+    max-width: 27.5rem;
+  }
+
+  @media (min-width: 1800px) {
+    min-width: 460px;
+    max-width: 33.75rem;
+  }
+}
+
+.textContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.titleContainer {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -41,10 +75,7 @@
 .name {
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding: 0.75rem 1.25rem 0.625rem 1.25rem;
-  border: 1px solid var(--Violet-700);
+  padding: 0.25rem 0.75rem 0.125rem 0.75rem;
   border-radius: 1.5rem;
   background-color: var(--text-primary-light);
 }
@@ -53,31 +84,3 @@
   width: 100%;
   text-wrap: wrap;
 }
-
-.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;
-  }
-
-  @media (min-width: 1400px) {
-    min-width: 360px;
-    max-width: 27.5rem;
-  }
-
-  @media (min-width: 1800px) {
-    min-width: 460px;
-    max-width: 33.75rem;
-  }
-}