From 4ab98346051acc4a3339231b661c170a2e4f661d Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Fri, 22 Sep 2023 19:54:37 +0530
Subject: [PATCH] add hub card styling

---
 docs/_includes/platform.html |  2 +-
 docs/_sass/_main.scss        | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/docs/_includes/platform.html b/docs/_includes/platform.html
index f3867ee4f5b7..0323828f2d8c 100644
--- a/docs/_includes/platform.html
+++ b/docs/_includes/platform.html
@@ -5,7 +5,7 @@ <h1 class="title">{{ platform.hub-title }}</h1>
 
     <p>{{ site.data.routes.home.description }}</p>
 
-    <div class="cards-group">
+    <div class="platform-cards-group">
         {% for hub in platform.hubs %}
             {% include hub-card.html hub=hub platform=selectedPlatform %}
         {% endfor %}
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 40e54ac1f2ba..728785f69d05 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -445,18 +445,26 @@ button {
     }
 }
 
-.cards-group {
+.cards-group, .platform-cards-group {
     display: grid;
     grid-template-columns: auto;
     row-gap: 20px;
     column-gap: 20px;
     padding-bottom: 20px;
+}
 
+.cards-group {
     @include breakpoint($breakpoint-desktop) {
         grid-template-columns: 50% 50%;
     }
 }
 
+.platform-cards-group {
+    @include breakpoint($breakpoint-desktop) {
+        grid-template-columns: 33.33% 33.33% 33.33%;
+    }
+}
+
 .card {
     display: flex;
     flex-wrap: nowrap;
@@ -546,7 +554,7 @@ button {
     display: flex;
     flex-wrap: nowrap;
     border-radius: 16px;
-    padding: 28px;
+    padding: 24px;
     font-weight: 700;
     cursor: pointer;
     color: $color-text;
@@ -558,6 +566,7 @@ button {
 
     .row {
         display: flex;
+        flex-direction: column;
         flex-basis:100%;
     }
 
@@ -567,7 +576,7 @@ button {
         padding-right: 28px;
 
         img {
-            width: 64px;
+            width: 68px;
         }
     }
 
@@ -597,6 +606,7 @@ button {
     }
 
     h3.title {
+        font-size: 1.2em;
         font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif;
     }
 
@@ -606,7 +616,7 @@ button {
         margin: 0;
 
         &.with-margin {
-            margin: 0 0 4px 0;
+            margin: 20px 0 8px 0;
         }
     }