Added support for negative offset columns with responsive support

modules/primer-marketing-utilities/docs/layout.md

@@ -33,3 +33,14 @@ Use responsive position utilities to adjust the position of an element at differ
   default
 </div>
 ```
+
+## Negative offset columns
+
+Using column offset classes can pull a div over X number of columns to the left. They work responsively using the [breakpoints outlined below](../grid#responsive-grids).
+
+```html title="Negative offset columns"
+<div class="clearfix">
+  <div class="offset-n1 col-3 border p-3">.offset-n1</div>
+  <div class="offset-n2 col-3 border p-3">.offset-n2</div>
+</div>
+```

modules/primer-marketing-utilities/lib/layout.scss

@@ -15,3 +15,35 @@
     .position-#{$breakpoint}-fixed    { position: fixed !important; }
   }
 }
+
+// Negative offset columns
+.offset-0 { margin-left: 0; }
+.offset-n1 { margin-left: -(1 / 12 * 100%); }
+.offset-n2 { margin-left: -(2 / 12 * 100%); }
+.offset-n3 { margin-left: -(3 / 12 * 100%); }
+.offset-n4 { margin-left: -(4 / 12 * 100%); }
+.offset-n5 { margin-left: -(5 / 12 * 100%); }
+.offset-n6 { margin-left: -(6 / 12 * 100%); }
+.offset-n7 { margin-left: -(7 / 12 * 100%); }
+.offset-n8 { margin-left: -(8 / 12 * 100%); }
+.offset-n9 { margin-left: -(9 / 12 * 100%); }
+.offset-n10 { margin-left: -(10 / 12 * 100%); }
+.offset-n11 { margin-left: -(11 / 12 * 100%); }
+
+// Responsive classes for negative offset columns
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    .offset-#{$breakpoint}-0 { margin-left: 0; }
+    .offset-#{$breakpoint}-n1 { margin-left: -(1 / 12 * 100%); }
+    .offset-#{$breakpoint}-n2 { margin-left: -(2 / 12 * 100%); }
+    .offset-#{$breakpoint}-n3 { margin-left: -(3 / 12 * 100%); }
+    .offset-#{$breakpoint}-n4 { margin-left: -(4 / 12 * 100%); }
+    .offset-#{$breakpoint}-n5 { margin-left: -(5 / 12 * 100%); }
+    .offset-#{$breakpoint}-n6 { margin-left: -(6 / 12 * 100%); }
+    .offset-#{$breakpoint}-n7 { margin-left: -(7 / 12 * 100%); }
+    .offset-#{$breakpoint}-n8 { margin-left: -(8 / 12 * 100%); }
+    .offset-#{$breakpoint}-n9 { margin-left: -(9 / 12 * 100%); }
+    .offset-#{$breakpoint}-n10 { margin-left: -(10 / 12 * 100%); }
+    .offset-#{$breakpoint}-n11 { margin-left: -(11 / 12 * 100%); }
+  }
+}