💄 Fix featured case hover, add gap

varianter · Dec 20, 2024 · 870bb17 · 870bb17
1 parent a60175e
commit 870bb17
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 20 deletions.
diff --git a/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx b/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx
@@ -24,19 +24,17 @@ export default function FeaturedCases({
         <Text type={"h3"}>{t("featured_cases.projects")}</Text>
         <div className={styles.content}>
           {featuredCases.map((featuredCase) => (
-            <div key={featuredCase._id} className={styles.caseWrapper}>
-              <Link
-                href={`/${[...customerCasesPath, featuredCase.slug].join("/")}`}
-              >
-                <div className={styles.caseImageWrapper}>
-                  <SanityImage image={featuredCase.image} isShared />
-                </div>
-                <div>
-                  <Text type={"bodyBig"}>{featuredCase.basicTitle}</Text>
-                  <Text type={"bodySmall"}>{featuredCase.description}</Text>
-                </div>
-              </Link>
-            </div>
+            <Link
+              href={`/${[...customerCasesPath, featuredCase.slug].join("/")}`}
+              className={styles.caseWrapper}
+              key={featuredCase._id}
+            >
+              <div className={styles.caseImageWrapper}>
+                <SanityImage image={featuredCase.image} isShared />
+              </div>
+              <Text type={"h4"}>{featuredCase.basicTitle}</Text>
+              <Text type={"bodySmall"}>{featuredCase.description}</Text>
+            </Link>
           ))}
         </div>
       </div>

diff --git a/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css b/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css
@@ -3,9 +3,8 @@
   flex-direction: column;
   gap: var(--padding-s);
   margin: 4rem auto;
-
-  max-width: var(--max-content-width-medium);
   width: 100%;
+  max-width: var(--max-content-width-medium);
 }
 
 .content {
@@ -15,6 +14,8 @@
 }
 
 .caseWrapper {
+  display: flex;
+  flex-direction: column;
   gap: 1rem;
   max-width: 31.25rem;
   flex-grow: 1;
@@ -29,12 +30,9 @@
 .caseImageWrapper img {
   border-radius: 1.5rem;
   transition: all 0.3s ease;
-  width: 100% !important;
+  width: 100%;
+
   &:hover {
     border-radius: 0.375rem;
   }
 }
-
-.content:hover img {
-  border-radius: 0.375rem;
-}