From 7bb8b784a5c404619ea34dd5a921b7a1189220d8 Mon Sep 17 00:00:00 2001
From: aswanson-nr <aswanson@newrelic.com>
Date: Mon, 3 Jan 2022 11:06:55 -0800
Subject: [PATCH] feat: clean up spacing and copy

---
 src/components/PackTile.js         | 3 ++-
 src/pages/instant-observability.js | 7 ++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/PackTile.js b/src/components/PackTile.js
index 89cf240e9..f703a61d8 100644
--- a/src/components/PackTile.js
+++ b/src/components/PackTile.js
@@ -139,10 +139,11 @@ const PackTile = ({
         </h4>
         <p
           css={css`
-            font-size: 0.875rem;
+            font-size: 0.8rem;
             color: var(--secondary-text-color);
             overflow: hidden;
             display: -webkit-box;
+            white-space: normal;
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 3;
           `}
diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js
index a011cc663..b55c3adde 100644
--- a/src/pages/instant-observability.js
+++ b/src/pages/instant-observability.js
@@ -191,13 +191,14 @@ const QuickstartsPage = ({ data, location }) => {
       <IOBanner />
       <div
         css={css`
-          --sidebar-width: 377px;
+          --sidebar-width: 300px;
           --banner-height: 308px;
 
           display: grid;
           grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
           grid-template-areas: 'sidebar main';
           grid-template-rows: 1fr auto;
+          grid-gap: 70px;
           min-height: calc(100vh - var(--global-header-height));
           margin: var(--banner-height) auto;
           max-width: var(--site-max-width);
@@ -498,14 +499,14 @@ const QuickstartsPage = ({ data, location }) => {
           <div
             css={css`
               display: grid;
-              grid-gap: 2rem;
+              grid-gap: 1.25rem;
               grid-template-columns: repeat(4, 1fr);
               grid-auto-rows: minmax(
                 var(--guide-list-row-height, 150px),
                 287px
               );
 
-              @media (max-width: 1450px) {
+              @media (max-width: 1350px) {
                 grid-template-columns: repeat(3, 1fr);
               }