diff --git a/src/components/sections/employeeHighlight/employeeHighlight.module.css b/src/components/sections/employeeHighlight/employeeHighlight.module.css index 753ab218e..c95491914 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: 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%; } } @@ -81,6 +69,7 @@ } .description { - width: 100%; + /* width: 100%; */ + text-overflow: ellipsis; text-wrap: wrap; }