column gaps homepage

Author: outofambit

src/components/Settings/styles.module.scss

@@ -16,7 +16,8 @@
   padding: var(--spacing-sm) 1.25rem;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   grid-template-rows: repeat(2, var(--settings-container-height-touch));
-  gap: 20px;
+  row-gap: 20px;
+  column-gap: 40px;
 
   @media (min-width: $breakpoint-tablet) {
     width: calc(100% - var(--nav-offset-x));

src/layouts/HomepageLayout.astro

@@ -36,7 +36,7 @@ setJumpToState(null);
 />
 
 <BaseLayout title="" variant="homepage" homepageConfig={config}>
-  <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-xl mb-xl">
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-[40px] gap-y-xl mb-xl">
     <div
       class="col-span-2 lg:col-span-3 order-1 grid grid-cols-subgrid content-start"
     >
@@ -61,7 +61,7 @@ setJumpToState(null);
     </div>
   </div>
 
-  <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-xl mb-xl">
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-[40px] gap-y-xl mb-xl">
     <div class="col-span-2 lg:col-span-3 grid grid-cols-subgrid content-start">
       <h2 class="col-span-3">{data.communityHeaderText}</h2>
       <LinkButton class="col-span-1 w-full" variant="link" url="/community"
@@ -80,7 +80,7 @@ setJumpToState(null);
     </div>
   </div>
 
-  <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg mb-xl">
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg gap-x-[40px] mb-xl">
     <div class="grid grid-cols-subgrid col-span-1 lg:col-span-2">
       <h2 class="col-span-2">{t("Donate to p5.js")}</h2>
       <div class="col-span-1">