From 42546a277f2861fb75bd2d8048a8997113648b52 Mon Sep 17 00:00:00 2001
From: Thomas KLEIN <tomak@dnd.fr>
Date: Sat, 1 Feb 2025 22:33:59 +0100
Subject: [PATCH] Fix RWD staff

---
 public/locales/fr/staff.json     |  2 +-
 src/app/staff/page.tsx           |  2 +-
 src/components/Person/Person.tsx | 20 ++++++++++----------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/public/locales/fr/staff.json b/public/locales/fr/staff.json
index cafbf01..05e83fb 100644
--- a/public/locales/fr/staff.json
+++ b/public/locales/fr/staff.json
@@ -68,7 +68,7 @@
       "companyLogo": "/images/logo/opengento.svg",
       "companyUrl": "https://opengento.fr/",
       "linkedin": "https://www.linkedin.com/in/thomas-klein/",
-      "role": "Chargée de communication",
+      "role": "Secrétaire",
       "photo": "/images/staff/thomas_klein.jpeg",
       "biography": ""
     },
diff --git a/src/app/staff/page.tsx b/src/app/staff/page.tsx
index f3851b9..4c136d5 100644
--- a/src/app/staff/page.tsx
+++ b/src/app/staff/page.tsx
@@ -68,7 +68,7 @@ export default function Page() {
           {t('staff:description')}
         </Typography>
       </ContentMedia>
-      <div className="grid grid-cols-3 gap-8 gap-y-12">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 gap-y-12">
         {staffMembers
           .map((staff) => (
             <div
diff --git a/src/components/Person/Person.tsx b/src/components/Person/Person.tsx
index 504897a..13f482b 100644
--- a/src/components/Person/Person.tsx
+++ b/src/components/Person/Person.tsx
@@ -29,31 +29,31 @@ const Person = ({ person }: { person: PersonProps }) => {
   return (
     <>
       {width < 768 ? (
-        <div className={classNames(
-          "flex flex-row gap-2 rounded-full",
-          bgClass
-        )}>
+        <div className="flex flex-row gap-2 rounded-full">
           <Image
             src={person.photo}
             alt={person.name}
             width={135}
             height={135}
-            className="min-w-[135px] rounded-full relative aspect-squareobject-cover overflow-hidden"
+            className={classNames(
+              "min-w-[135px] rounded-full relative aspect-squareobject-cover overflow-hidden",
+              bgClass
+            )}
           />
           <PersonCard person={person} />
         </div>
       ) : (
         <>
-          <div className={classNames(
-            "flex flex-col relative rounded-full",
-            bgClass
-          )}>
+          <div className="flex flex-col relative rounded-full">
             <Image
               src={person.photo}
               alt={person.name}
               width={165}
               height={165}
-              className="min-w-[165px] rounded-full relative aspect-square object-cover overflow-hidden"
+              className={classNames(
+                "min-w-[165px] rounded-full relative aspect-square object-cover overflow-hidden",
+                bgClass
+              )}
             />
             <div className="text-white font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-primary w-fit px-4 py-2 rounded-full absolute bottom-0 left-1/2 -translate-x-1/2">
               <div className="flex flex-row items-center gap-1">