From 16abed6f79c3719ede4869205803c85e7b5cb9a4 Mon Sep 17 00:00:00 2001
From: Adam Jolicoeur <mindreeper2420@gmail.com>
Date: Mon, 21 Aug 2023 13:27:00 -0400
Subject: [PATCH] Fix overlap due to excess padding and margin

---
 docs/design/index.html | 10 +++++-----
 src/pages/design.md    |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/design/index.html b/docs/design/index.html
index a14deae2..846d924e 100644
--- a/docs/design/index.html
+++ b/docs/design/index.html
@@ -97,7 +97,7 @@ <h1 class="display-1 jumbo-heading">designs</h1>
     <div class="col-md-6 text-center text-md-start">
       <h2>Application Lifecycle Management</h2>
       <p class="text-body-secondary">A one-stop-shop for a team's planning and project lifecycle management.</p>
-      <a href="/designs/alm" class="btn btn-dark icon-link lead" alt="Click to experience the Application Lifecycle Management journey">
+      <a href="/designs/alm" role="button" class="btn btn-dark icon-link lead" alt="Click to experience the Application Lifecycle Management journey">
         the journey
       </a>
     </div>
@@ -109,7 +109,7 @@ <h2>Application Lifecycle Management</h2>
     <div class="col-md-6 text-center text-md-start">
       <h2>Customer Engagement App</h2>
       <p class="text-body-secondary">End-to-end tracking of customer engagement and marketing campaigns.</p>
-      <a href="/designs/customer-engagement" class="btn btn-dark icon-link lead" alt="Click to experience the Customer Engagement journey">
+      <a href="/designs/customer-engagement" role="button" class="btn btn-dark icon-link lead" alt="Click to experience the Customer Engagement journey">
         the journey
       </a>
     </div>
@@ -166,8 +166,8 @@ <h2>Environment themes</h2>
       Inspired by the PatternFly design system, I created two libraries for use with Atom.io. As atom.io is no longer available, these themes are left to history.</p>
     </div>
   </div>
-  <div class="row align-items-start gx-5">
-    <div class="col-md-3">
+  <div class="row align-items-start">
+    <div class="col-md-6 col-lg-4 px-md-3 my-2 my-md-0">
       <div class="card px-0">
         <img src="/img/atom-pf-theme.png" class="card-img-top" alt="Atom.io PatternFly Theme screenshot" height="200">
         <div class="card-body">
@@ -175,7 +175,7 @@ <h5 class="card-title">Atom.io PatternFly theme</h5>
         </div>
       </div>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-6 col-lg-4 px-md-3 my-2 my-md-0">
       <div class="card px-0">
         <img src="/img/atom-pf-syntax.png" class="card-img-top" alt="Atom.io PatternFly Syntax screenshot" height="200">
         <div class="card-body">
diff --git a/src/pages/design.md b/src/pages/design.md
index 07d130c9..83fd5b50 100644
--- a/src/pages/design.md
+++ b/src/pages/design.md
@@ -89,8 +89,8 @@ eleventyNavigation:
       Inspired by the PatternFly design system, I created two libraries for use with Atom.io. As atom.io is no longer available, these themes are left to history.</p>
     </div>
   </div>
-  <div class="row align-items-start gx-5">
-    <div class="col-md-3">
+  <div class="row align-items-start">
+    <div class="col-md-6 col-lg-4 px-md-3 my-2 my-md-0">
       <div class="card px-0">
         <img src="{{ "/img/atom-pf-theme.png" | url }}" class="card-img-top" alt="Atom.io PatternFly Theme screenshot" height="200">
         <div class="card-body">
@@ -98,7 +98,7 @@ eleventyNavigation:
         </div>
       </div>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-6 col-lg-4 px-md-3 my-2 my-md-0">
       <div class="card px-0">
         <img src="{{ "/img/atom-pf-syntax.png" | url }}" class="card-img-top" alt="Atom.io PatternFly Syntax screenshot" height="200">
         <div class="card-body">