Use container padding where possible in Ground Nav (#1042)

Author: tylersticka

.changeset/real-comics-play.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Make Ground Nav component whitespace consistent with Container object

src/components/ground-nav/ground-nav.scss

@@ -14,13 +14,28 @@ $_ground-nav-border-width: sizes.$edge-medium;
 $_ground-nav-border-style: solid;
 $_ground-nav-border-color: colors.$gray-light;
 
-.c-ground-nav__action,
-.c-ground-nav__content {
-  padding: $_ground-nav-space;
+/**
+ * 1. We establish vertical whitespace for the action to simplify alignment of
+ *    the illustration, but other whitespace is assumed to be handled by the
+ *    container object to promote alignment with adjacent sections.
+ * 2. Allow illustration to be positioned relative to this container.
+ */
+
+.c-ground-nav__action {
+  padding-bottom: $_ground-nav-space; /* 1 */
+  padding-top: $_ground-nav-space; /* 1 */
+  position: relative; /* 2 */
 }
 
 .c-ground-nav__action-inner {
-  position: relative;
+  /**
+   * Starting at this viewport, we want to position the illustration relative to
+   * the inner element (away from the nearest horizontal edge).
+   */
+
+  @media (min-width: breakpoint.$m) {
+    position: relative;
+  }
 
   @media (min-width: breakpoint.$l) {
     align-items: center;
@@ -47,13 +62,19 @@ $_ground-nav-border-color: colors.$gray-light;
  */
 
 .c-ground-nav__action-illustration {
-  bottom: $_ground-nav-negative-space;
+  bottom: 0;
   position: absolute;
-  right: $_ground-nav-negative-space;
+  right: 0;
   width: 40%;
 
+  /**
+   * We position ourselves relative to a max-width container starting at this
+   * breakpoint, so we have to adjust the bottom position to account for the
+   * change in whitespace.
+   */
+
   @media (min-width: breakpoint.$m) {
-    right: 0;
+    bottom: $_ground-nav-negative-space;
     width: calc(100% / 3);
   }
 

src/components/ground-nav/ground-nav.twig

@@ -12,7 +12,7 @@
 
 <footer class="c-ground-nav">
   {% with action|default({}) %}
-  <div class="c-ground-nav__action o-container">
+  <div class="c-ground-nav__action o-container o-container--pad-inline">
     <div class="o-container__content c-ground-nav__action-inner">
       <h2 class="c-ground-nav__action-lead-in">
         {{leadIn}}
@@ -42,7 +42,7 @@
   </div>
   {% endwith %}
 
-  <div class="c-ground-nav__content o-container">
+  <div class="c-ground-nav__content o-container o-container--pad">
     <div class="c-ground-nav__content-inner o-container__content">
       <h2 class="u-hidden-visually">
         Contact info