tweak book club page

assets/scss/static.scss

@@ -45,6 +45,14 @@ h2 {
   font-family: var(--wp--preset--font-family--eb-garamond);
   font-size: 38px;
   line-height: 1;
+  margin-block-start: 0;
+  margin-block-end: 42px;
+}
+
+p {
+  margin-block-start: 0;
+  margin-block-end: 25px;
+  line-height: 1.3;
 }
 
 .btn {
@@ -54,6 +62,7 @@ h2 {
   text-decoration: none;
   font-size: 16px;
   transition: all 0.25s ease;
+  margin-bottom: 26px;
 
   &:hover {
     text-decoration: none;
@@ -63,8 +72,8 @@ h2 {
     background-color: var(--foreground-text);
     color: var(--background);
     &:hover { 
-      background-color: white;
-      color: black;
+      background-color: transparent;
+      color: var(--foreground-text);
     }
   }
 }
@@ -98,6 +107,9 @@ h2 {
     align-items: center;
     justify-content: space-between;
     gap: 1em;
+    .btn {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -121,6 +133,9 @@ section.hero {
     
     .hero--text {
       grid-column: 2 / 4;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
   
       h2 {
         font-family: var(--wp--preset--font-family--eb-garamond);
@@ -148,6 +163,11 @@ section.hero {
       border-top-left-radius: 12px;
       border-bottom-left-radius: 12px;
       border-right: none;
+
+      // FIXME: Not sure about this rule for the hero image, feels too hacky. We can rework it when building the final pages.
+      max-height: 366px;
+      object-fit: cover;
+
       @include respond(mobile) {
         order: -1;
         border-radius: 12px;
@@ -164,14 +184,15 @@ section.hero {
     display: flex;
     text-align: center;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    column-gap: 2rem;
-    row-gap: 1rem;
+    // column-gap: 2rem;
+    // row-gap: 1rem;
 
     @include respond(mobile) {
       justify-content: space-around;
     }
+    img { transform: scale(0.67) }
   }
 }
 
@@ -199,7 +220,7 @@ section.pitch {
       border: 1px solid #FAF7EF;
       border-radius: 12px;
       text-align: center;
-      padding-block: 40px;
+      padding-block: 25px;
       padding-inline: 25px;
       // height: 244px;
 
@@ -232,6 +253,7 @@ section.book-club-examples {
 
   .book-club-example-cards {
     padding-block: 84px;
+    padding-top: 12px;
     .book-club-example-card--item {
       display: flex;
       @include respond(mobile) { flex-direction: column; }
@@ -240,6 +262,7 @@ section.book-club-examples {
       border-radius: 12px;
       margin-inline: auto;
       margin-block: 36px;
+      max-height: 264px;
   
       &--img {
         border-radius: 12px;
@@ -376,6 +399,7 @@ section.book-club-benefits {
     gap: 16px;
     row-gap: 90px;
     margin-block: 140px;
+    margin-top: 84px;
 
     .benefit-card--item {
       img {
@@ -387,6 +411,7 @@ section.book-club-benefits {
       p {
         max-width: 289px;
         margin-inline: auto;
+        margin-top: 21px;
         strong {
           font-weight: 600;
         }