From c82fafc376fce7c05b9a52f6ce5736cc0def810a Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Thu, 10 Aug 2023 21:35:06 +0200
Subject: [PATCH] Extract the spacing to variables

---
 scss/_patterns_logo-section.scss | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/scss/_patterns_logo-section.scss b/scss/_patterns_logo-section.scss
index c39003430..0c250e84f 100644
--- a/scss/_patterns_logo-section.scss
+++ b/scss/_patterns_logo-section.scss
@@ -4,19 +4,23 @@
     @extend %small-caps-text;
   }
 
+  $logo-section-item-size: 8rem; // height of the logos on large screens;
+  $logo-section-item-gap: 3rem;
+  $logo-section-offset: 1rem; // offset by which rows are pulled closer together
+
   .p-logo-section,
   .p-logo-section--dense {
     .p-logo-section__item {
       display: inline-block;
       margin: 0;
-      margin-bottom: -1rem; // pull the next row of logos up
-      margin-right: 3rem;
-      margin-top: -1rem; // pull the previous row of logos down
+      margin-bottom: calc(-1 * $logo-section-offset); // pull the next row of logos up
+      margin-right: $logo-section-item-gap;
+      margin-top: calc(-1 * $logo-section-offset); // pull the previous row of logos down
     }
 
     .p-logo-section__logo {
       display: block;
-      height: 8rem;
+      height: $logo-section-item-size;
       max-width: none; // prevent logos from squishing on small screens
       width: auto;
     }
@@ -25,8 +29,8 @@
       line-height: 0; // prevent space between rows of inline logos
 
       // compensate for the negative margin on the logos
-      padding-bottom: 1rem;
-      padding-top: 1rem;
+      padding-bottom: $logo-section-offset;
+      padding-top: $logo-section-offset;
     }
   }
 
@@ -34,18 +38,18 @@
     .p-logo-section__item {
       display: inline-block;
       margin: 0;
-      margin-bottom: -0.5rem; // pull the next row of logos up
-      margin-right: 1.5rem;
-      margin-top: -0.5rem; // pull the previous row of logos down
+      margin-bottom: calc(-0.5 * $logo-section-offset); // pull the next row of logos up
+      margin-right: calc(0.5 * $logo-section-item-gap);
+      margin-top: calc(-0.5 * $logo-section-offset); // pull the previous row of logos down
     }
 
     .p-logo-section__logo {
-      height: 5rem;
+      height: calc(0.5 * $logo-section-item-size);
     }
 
     .p-logo-section__items {
-      padding-bottom: 0.5rem;
-      padding-top: 0.5rem;
+      padding-bottom: calc(0.5 * $logo-section-offset);
+      padding-top: calc(0.5 * $logo-section-offset);
     }
   }
 }