diff --git a/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx b/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx
index 7ea34672d..0a0ffc819 100644
--- a/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx
+++ b/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx
@@ -13,6 +13,8 @@ export interface CustomerCaseEmployeeCardProps {
employeePageSlug?: string;
}
+// TODO: Remove this component
+// SHOULD USE SAME AS OTHER PLACES
export default function CustomerCaseEmployeeCard({
employee,
}: CustomerCaseEmployeeCardProps) {
@@ -48,13 +50,15 @@ export default function CustomerCaseEmployeeCard({
diff --git a/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css b/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css
index f75bbbe3f..2451d9fe3 100644
--- a/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css
+++ b/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css
@@ -1,8 +1,7 @@
.employee {
- display: flex;
+ display: grid;
+ grid-template-columns: 1fr 4fr;
gap: 1rem;
- min-width: 375px;
- flex: 1;
}
.employeeImage {
@@ -10,16 +9,17 @@
flex-direction: column;
align-items: center;
background-color: var(--background-bg-dark);
- border-radius: 12px;
position: relative;
width: 112px;
height: 112px;
+ border-radius: var(--radius-medium);
+ overflow: hidden;
+ aspect-ratio: 1/1;
}
.employeeInfo {
display: flex;
flex-direction: column;
- justify-content: space-between;
height: 100%;
}
@@ -30,20 +30,11 @@
}
.employeeRole {
- display: flex;
- width: fit-content;
- flex-direction: row;
- flex-wrap: wrap;
}
-.employeeRoleDot::after {
+.employeeRoleDot:not(:last-child)::after {
content: "ยท";
- margin: 0 0.5rem;
-}
-
-.employeeRoleDot:last-child:after {
- content: "";
- margin: 0;
+ margin: 0 0.25rem;
}
.employeeRole {
diff --git a/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css b/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css
index 66e0ad32b..15f0c866c 100644
--- a/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css
+++ b/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css
@@ -1,24 +1,22 @@
.wrapper {
display: flex;
flex-direction: column;
- gap: 2rem;
- margin: 4rem 0;
+ gap: var(--padding-s);
+ margin: 4rem auto;
+
+ max-width: var(--max-content-width-medium);
+ width: 100%;
}
.content {
- display: flex;
- gap: 5rem;
-
- @media (max-width: 1024px) {
- flex-direction: column;
- }
+ display: grid;
+ gap: var(--padding-m);
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.caseWrapper {
- display: flex;
- flex-direction: column;
gap: 1rem;
- max-width: 500px;
+ max-width: 31.25rem;
flex-grow: 1;
flex-basis: 0;
}
diff --git a/src/components/customerCases/customerCase/sections/customerCaseConsultants/customerCaseConsulants.module.css b/src/components/customerCases/customerCase/sections/customerCaseConsultants/customerCaseConsulants.module.css
index 657050d1b..51088947e 100644
--- a/src/components/customerCases/customerCase/sections/customerCaseConsultants/customerCaseConsulants.module.css
+++ b/src/components/customerCases/customerCase/sections/customerCaseConsultants/customerCaseConsulants.module.css
@@ -1,14 +1,17 @@
.wrapper {
display: flex;
flex-direction: column;
- gap: 2rem;
+ gap: var(--padding-s);
margin: 4rem 0;
+
+ align-self: center;
+ width: 100%;
+ max-width: var(--max-content-width-medium);
}
.content {
width: 100%;
- gap: 3rem;
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
+ gap: 1.5em;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}