Update styling of tutor cards

src/components/atoms/TutorCard/index.tsx

@@ -19,13 +19,7 @@ const TutorCard: React.FC<TutorCardProp> = ({
   return (
     <>
       <Container
-        style={{
-          display: "flex",
-          padding: 0,
-          marginTop: "1.25rem",
-          alignItems: "center",
-          width: "100%"
-        }}
+        className={styles.tutorContainer}
       >
         <Image className={styles.tutorImage} src={image} />
         <div>

src/components/atoms/TutorCard/style.module.scss

 @import "assets/scss/custom";
 
+.tutorContainer {
+  display: flex;
+  padding: 0;
+  margin-top: 1.25rem;
+  align-items: center;
+  width: 100%;
+  background: $white;
+  border: 0.0625rem solid $gray-200;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  transition: 0.2s transform, 0.2s box-shadow;
+  -webkit-transition: 0.2s transform, 0.2s box-shadow;
+  -moz-transition: 0.2s transform, 0.2s box-shadow;
+}
+
+.tutorContainer:hover {
+  border-color: $gray-300;
+  transform: scale(1.03);
+  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+}
+
 .tutorImage {
   border-radius: 50%;
-  margin-right: 1.25rem;
-  height: 3.75rem;
-  width: 3.75rem;
+  margin-right: 0.75rem;
+  height: 4rem;
+  width: 4rem;
 }
 
 .tutorName,