card update

src/components/Card/index.tsx

@@ -18,15 +18,20 @@ export type CardProps = {
 }
 
 export const Card: React.FC<CardProps> = props => (
-    <div className={cx(s.card, layoutClass[props.layout])} style={props.style}>
-        <Link href={props.href}>
-            <div className={s.image}>
-                {props.cover}
-            </div>
+    <Link
+        href={props.href}
+        // className={cx(s.card, layoutClass[props.layout])}
+        className={cx(s.card, layoutClass["simple"])}
+        style={props.style}
+    >
+        <div className={s.image}>
+            {props.cover}
+        </div>
 
-            <div className={s.body}>
-                {props.children}
-            </div>
-        </Link>
-    </div>
+        <div className={s.body}>
+            {props.children}
+        </div>
+    </Link>
 )
+
+

src/components/Card/styles.module.css

@@ -3,28 +3,7 @@
 .card {
     border-radius: var(--radius);
     box-shadow: var(--shadow);
-    overflow: hidden;
-    transition: box-shadow 150ms;
 
-    border: var(--border);
-}
-
-.card:hover {
-    box-shadow: var(--shadow-active);
-}
-
-.card:hover img {
-    width: 104%;
-    height: 104%;
-
-    top: -2%;
-    left: -2%;
-}
-
-.card > a {
-    display: block;
-    height: 100%;
-    position: relative;
     color: var(--color-text);
     text-decoration: none;
 }
@@ -33,39 +12,52 @@
     position: relative;
     width: 100%;
     height: 100%;
+
+    overflow: hidden;
+    border-radius: var(--radius);
+}
+
+.image img {
+    border-radius: var(--radius);
 }
 
 .body {
     background-color: var(--color-back);
     padding: var(--size-m);
+    border-radius: var(--radius);
+}
+
+/* CARD ANIMATION */
+
+/* .card:hover { */
+/*     box-shadow: var(--shadow-active); */
+/* } */
+
+/* IMAGE  ANIMATION */
+
+.card .image {
+    transition: box-shadow 150ms ease, transform 150ms ease;
+}
+
+.card:hover .image {
+    box-shadow: var(--shadow-active);
+    transform: scale(1.025);
 }
 
 /* SIMPLE */
 
-.simple .body {
-    position: relative;
-    padding-top: 0;
-}
-
-.simple .body:before {
-    position: absolute;
-    content: '';
+.card.simple {
     background-color: var(--color-back);
-
-    border-radius: var(--radius) var(--radius) 0 0;
-    width: 100%;
-    height: var(--size-m);
-    top: calc(var(--size-m) * -1);
-    left: 0;
-}
-
-.simple > a {
     display: flex;
     flex-direction: column;
 }
 
 /* FEATURED */
 
+.card.featured {
+    position: relative;
+}
+
 .featured .body {
     position: absolute;