From 4c975aaed907c379385acfe04823270872cc89da Mon Sep 17 00:00:00 2001
From: Sophie Shepherd <sophshep@github.com>
Date: Wed, 17 Oct 2018 16:24:11 -0500
Subject: [PATCH] Update modules/primer-layout/lib/grid-offset.scss

---
 modules/primer-layout/lib/grid-offset.scss | 35 ++++++++--------------
 1 file changed, 12 insertions(+), 23 deletions(-)

diff --git a/modules/primer-layout/lib/grid-offset.scss b/modules/primer-layout/lib/grid-offset.scss
index e638d3851f..bc2115d87f 100644
--- a/modules/primer-layout/lib/grid-offset.scss
+++ b/modules/primer-layout/lib/grid-offset.scss
@@ -1,30 +1,19 @@
 // Optional offset options to work with grid.scss
 
 // Offset Columns
-.offset-1 { margin-left: (1 / 12 * 100%); }
-.offset-2 { margin-left: (2 / 12 * 100%); }
-.offset-3 { margin-left: (3 / 12 * 100%); }
-.offset-4 { margin-left: (4 / 12 * 100%); }
-.offset-5 { margin-left: (5 / 12 * 100%); }
-.offset-6 { margin-left: (6 / 12 * 100%); }
-.offset-7 { margin-left: (7 / 12 * 100%); }
-.offset-8 { margin-left: (8 / 12 * 100%); }
-.offset-9 { margin-left: (9 / 12 * 100%); }
-.offset-10 { margin-left: (10 / 12 * 100%); }
-.offset-11 { margin-left: (11 / 12 * 100%); }
 
-@each $breakpoint in map-keys($breakpoints) {
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    .offset-#{$breakpoint}-1 { margin-left: (1 / 12 * 100%); }
-    .offset-#{$breakpoint}-2 { margin-left: (2 / 12 * 100%); }
-    .offset-#{$breakpoint}-3 { margin-left: (3 / 12 * 100%); }
-    .offset-#{$breakpoint}-4 { margin-left: (4 / 12 * 100%); }
-    .offset-#{$breakpoint}-5 { margin-left: (5 / 12 * 100%); }
-    .offset-#{$breakpoint}-6 { margin-left: (6 / 12 * 100%); }
-    .offset-#{$breakpoint}-7 { margin-left: (7 / 12 * 100%); }
-    .offset-#{$breakpoint}-8 { margin-left: (8 / 12 * 100%); }
-    .offset-#{$breakpoint}-9 { margin-left: (9 / 12 * 100%); }
-    .offset-#{$breakpoint}-10 { margin-left: (10 / 12 * 100%); }
-    .offset-#{$breakpoint}-11 { margin-left: (11 / 12 * 100%); }
+    .offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }
+    .offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }
+    .offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }
+    .offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }
+    .offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }
+    .offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }
+    .offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }
+    .offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }
+    .offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }
+    .offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }
+    .offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }
   }
 }