Finsishing CaseCard styling

components/Avatar.js

@@ -1,12 +1,17 @@
 import React from "react";
 import styles from "./modules/Avatar.module.css";
+import PropTypes from "prop-types";
 
 export default function Avatar(props) {
   return (
     <img
-      className={`${styles.bordered} ${styles.absolute}`}
+      className={styles[props.size]}
       src="/images/bongo.png"
       alt="The one and only bongo cat!"
     />
   );
 }
+
+Avatar.propTypes = {
+  size: PropTypes.string.isRequired,
+};

components/CaseCard.js

@@ -1,23 +1,28 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styles from "./modules/CaseCard.module.css";
+import Avatar from "./Avatar";
 
 export default function CaseCard(props) {
   const study = props.study;
 
   return (
-    <div className={styles.container}>
+    <a className={styles.container}>
       <img
         className={`${styles.cover}`}
         src={props.study.cover}
         alt="The one and only bongo cat!"
       />
+      <div className={styles.avatarHolder}>
+        <Avatar size={"small"} />
+      </div>
+
       <div className={styles.cardInfo}>
         <b className={styles.title}>{study.title}</b>
         <p className={styles.description}>{study.short_description}</p>
         <b>{study.date}</b>
       </div>
-    </div>
+    </a>
   );
 }
 

components/HomeSection.js

@@ -21,7 +21,7 @@ export default function HomeSection(props) {
             lastName={person.lastName}
             description={person.description}
           />
-          <Avatar />
+          <Avatar size={"big"} />
 
           <Infos infos={person.infos} />
         </div>

components/modules/Avatar.module.css

@@ -1,15 +1,21 @@
-.bordered {
+.big {
+  width: 256px;
+  height: 256px;
+
   border: 6px solid var(--dark);
   border-radius: 16px;
 }
 
-.absolute {
-  width: 256px;
-  height: 256px;
+.small {
+  width: 64px;
+  height: 64px;
+
+  border: 4px solid var(--lightDark);
+  border-radius: 8px;
 }
 
 @media screen and (max-width: 1440px) {
-  .absolute {
+  .big {
     display: none;
   }
 }

components/modules/CaseCard.module.css

@@ -1,21 +1,36 @@
 .container {
   height: 100%;
+
   border-radius: 16px;
   background-color: var(--lightDark);
+
+  cursor: pointer;
   overflow: hidden;
+
+  transform: translateY(0);
+  transition: transform 0.3s ease-out;
+}
+
+.container:hover {
+  transform: translateY(-2%);
 }
 
 .cover {
-  height: 198px;
+  height: 256px;
   width: 100%;
 }
 
+.avatarHolder {
+  margin: -36px 0 0 2rem;
+}
+
 .cardInfo {
-  padding: 2rem;
+  padding: 0.5rem 2rem 2rem 2rem;
 }
 
 .title {
   font-size: 1.25em;
+  color: white;
 }
 
 .description {
@@ -23,3 +38,9 @@
   max-width: 320px;
   margin: 1rem 0;
 }
+
+@media screen and (max-width: 1440px) {
+  .container {
+    margin: 2rem 0;
+  }
+}

components/modules/CaseSection.module.css

@@ -27,7 +27,7 @@
   align-items: center;
 }
 
-@media screen and (max-width: 1280px) {
+@media screen and (max-width: 1440px) {
   .cardRow {
     flex-direction: column;
   }