diff --git a/src/components/sections/employeeHighlight/EmployeeHighlight.tsx b/src/components/sections/employeeHighlight/EmployeeHighlight.tsx index 12eb54211..f971b151f 100644 --- a/src/components/sections/employeeHighlight/EmployeeHighlight.tsx +++ b/src/components/sections/employeeHighlight/EmployeeHighlight.tsx @@ -14,8 +14,8 @@ export default function EmployeeHighLight({ section }: EmployeeHighlightProps) {
-
-
+
+
{section.basicTitle} diff --git a/src/components/sections/employeeHighlight/employeeHighlight.module.css b/src/components/sections/employeeHighlight/employeeHighlight.module.css index 43a66c278..753ab218e 100644 --- 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; - } -}