Improve typography in card components

Author: AkashBhave

web/src/components/Card.js

@@ -15,7 +15,7 @@ const Card = ({ item, isProject, showProject }) => {
               <Image
                 className={`w-full bg-gray-300 ${styles.cardImage}`}
                 fluid={item.mainImage.asset.fluid}
-                style={{ height: isProject ? "400px" : "300px" }}
+                style={{ height: isProject ? "300px" : "350px" }}
               />
             </div>
           ) : (

web/src/components/Card.module.css

@@ -3,11 +3,11 @@
 }
 
 .card-body {
-  @apply p-8 flex flex-col content-start;
+  @apply p-6 flex flex-col content-start;
 }
 
 .card-title {
-  @apply font-serif font-bold text-3xl -mb-2 break-words;
+  @apply font-serif font-bold text-2xl -mb-2 break-words;
 }
 
 .card-date {
@@ -18,7 +18,7 @@
 }
 
 .card-grid {
-  @apply flex flex-row flex-wrap justify-start -mx-4;
+  @apply flex flex-row flex-wrap justify-start;
 }
 
 .card-grid-card {

web/src/components/CardGrid.js

@@ -7,7 +7,7 @@ const CardGrid = ({ items, isProject, showProject }) => (
   <div className={styles.cardGrid}>
     {items.map(item => (
       <div
-        className={`${isProject ? "" : "lg:w-1/3"} md:w-1/2 w-full ${
+        className={`${isProject ? "lg:w-1/2" : "lg:w-1/3"} md:w-1/2 w-full ${
           styles.cardGridCard
         }`}
       >

web/src/pages/index.js

@@ -42,7 +42,7 @@ const IndexPage = ({ data }) => (
     </section>
     <section className="px-8 py-12 bg-blue-secondary text-light">
       <div className="container mx-auto">
-        <h2 className="uppercase text-4xl mb-8">Skills</h2>
+        <h2 className="uppercase font-bold text-4xl mb-8">Skills</h2>
         <div className="flex flex-wrap">
           {["Languages", "Platforms"].map(skillType => (
             <div className="w-full md:w-1/2 mb-4">
@@ -72,7 +72,7 @@ const IndexPage = ({ data }) => (
       </div>
     </section>
     <section className="px-8 py-12 container mx-auto">
-      <h2 className="uppercase text-4xl mb-8">Recent Posts</h2>
+      <h2 className="uppercase font-bold text-4xl mb-8">Recent Posts</h2>
       <CardGrid
         isProject={false}
         showProject={false}