From a53a9be4b73b0334fe122f3a774bb61edfe403ec Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabe@habitica.com>
Date: Wed, 22 May 2024 15:53:24 -0500
Subject: [PATCH] fix(css): flex gap is a thing

---
 website/client/src/components/creatorIntro.vue | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/website/client/src/components/creatorIntro.vue b/website/client/src/components/creatorIntro.vue
index 485c61501d..0c37341ba6 100644
--- a/website/client/src/components/creatorIntro.vue
+++ b/website/client/src/components/creatorIntro.vue
@@ -170,7 +170,7 @@
             {{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
           </div>
         </div>
-        <div class="row justify-content-center mb-4">
+        <div class="background-row d-flex justify-content-center mb-4">
           <div
             v-for="bg in standardBackgrounds"
             :id="bg.key"
@@ -209,7 +209,7 @@
             <strong>{{ allBackgrounds.eventBackgrounds.text }}</strong>
           </div>
           <div
-            class="row justify-content-center mb-4"
+            class="background-row d-flex justify-content-center mb-4"
           >
             <div
               v-for="bg in allBackgrounds.eventBackgrounds.items"
@@ -240,7 +240,7 @@
             <strong>{{ $t('timeTravelBackgrounds') }}</strong>
           </div>
           <div
-            class="row justify-content-center mb-4"
+            class="background-row d-flex justify-content-center mb-4"
           >
             <div
               v-for="bg in timeTravelBackgrounds"
@@ -270,7 +270,7 @@
           >
             <strong>{{ $t('monthlyBackgrounds') }}</strong>
           </div>
-          <div class="d-flex background-row justify-content-left mx-auto mb-4">
+          <div class="background-row d-flex justify-content-center mx-auto mb-4 px-5">
             <div
               v-for="(bg) in monthlyBackgrounds"
               :id="bg.key"
@@ -795,8 +795,8 @@
 
     #backgrounds {
       .background-row {
-        width: 82%;
         flex-wrap: wrap;
+        gap: 1.5rem;
       }
 
       .background-item {
@@ -821,14 +821,6 @@
           border-radius: 0;
         }
 
-        &:not(:nth-of-type(8n)) {
-          margin-right: 24px;
-        }
-
-        &:nth-of-type(n+9) {
-          margin-top: 24px;
-        }
-
         &:hover {
           outline: 4px solid rgba($purple-300, .25);
           border-radius: 4px;