chore: improve styles

Author: 3v0k4

docusaurus/docs/index.mdx

@@ -19,13 +19,17 @@ Explore our guides and examples to integrate Knapsack Pro into your project.
 
 If you have questions, feel free to [contact us](https://knapsackpro.com/contact) directly and we will be happy to help.
 
-## Overview
+## Introduction
 
-<div className="grid">
-<a href="/overview/" className="cell cell--fixed">
+<div className="grid-4">
+<a href="/overview/" className="cell">
 <span className="cell__image"><img width="70" height="70" src={knapsack}></img></span>
-<h2 className="cell__title">Knapsack Overview</h2>
+<h2 className="cell__title">Overview</h2>
 </a>
+
+<div></div>
+
+<div></div>
 </div>
 
 ## Libraries
@@ -63,23 +67,29 @@ Can't see your language/testing framework above? [Let us know](https://docs.goog
 
 You can still use Knapsack Pro by writing your integration on top of the JavaScript SDK or using the Knapsack Pro API:
 
-<div className="grid">
-<a href="https://docs.knapsackpro.com/2020/how-to-build-native-integration-with-knapsack-pro-api-to-run-tests-in-parallel-for-any-test-runner-testing-framework" target="_blank" rel="noopener noreferrer" className="cell cell--fixed">
+<div className="grid-4">
+<a href="https://docs.knapsackpro.com/2020/how-to-build-native-integration-with-knapsack-pro-api-to-run-tests-in-parallel-for-any-test-runner-testing-framework" target="_blank" rel="noopener noreferrer" className="cell">
 <div className="cell__image"><img width="70" height="70" src={javascript}></img></div>
 <h2 className="cell__title">JavaScript / TypeScript</h2>
 </a>
 
-<a href="https://docs.knapsackpro.com/2021/how-to-build-knapsack-pro-api-client-from-scratch-in-any-programming-language" target="_blank" rel="noopener noreferrer" className="cell cell--fixed">
+<a href="https://docs.knapsackpro.com/2021/how-to-build-knapsack-pro-api-client-from-scratch-in-any-programming-language" target="_blank" rel="noopener noreferrer" className="cell">
 <div className="cell__image"><img width="70" height="70" src={api}></img></div>
 <h2 className="cell__title">Other Language</h2>
 </a>
+
+<div></div>
 </div>
 
 ## Troubleshooting
 
-<div className="grid">
-<a href="/troubleshooting/" className="cell cell--fixed" style={{width: 'auto'}}>
+<div className="grid-4">
+<a href="/troubleshooting/" className="cell" style={{width: 'auto'}}>
 <div className="cell__image"><img width="70" height="70" src={troubleshooting}></img></div>
-<h2 className="cell__title">Troubleshooting</h2>
+<h2 className="cell__title">Trouble<wbr/>shoot</h2>
 </a>
+
+<div></div>
+
+<div></div>
 </div>

docusaurus/src/css/custom.css

@@ -119,13 +119,6 @@ li {
 
 /* Welcome */
 
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-bottom: var(--ifm-paragraph-margin-bottom);
-}
-
 .grid-4 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -145,10 +138,6 @@ li {
   padding: 10px 20px;
 }
 
-.cell--fixed {
-  width: 265px;
-}
-
 .cell:hover {
   border-color: var(--ifm-pagination-nav-color-hover);
   color: var(--ifm-heading-color);
@@ -174,8 +163,9 @@ li {
 }
 
 .cell__title {
-  display: inline-block;
+  font-size: 1.4rem;
   margin: 0;
+  min-width: 0;
 }
 
 /* Overview */