Bugfix/footer nav (#80)

* Added the button class to internal footer nav links to give them proper letter spacing and remove dupe CSS.

* Remove duplicate CSS and fix vertical padding

* Remove btn class on footer nav

* Add btn CSS props back to footer nav links, with letter spacing

* Remove a couple more cases of links turning bold on hover, causing jumpiness.

packages/vanilla/src/sass/components/footer/_external.scss

@@ -77,7 +77,6 @@
 
     &:hover {
       color: var(--cbp-color-interactive-primary-lighter);
-      font-weight: var(--cbp-font-weight-bold);
       text-decoration: underline;
     }
 
@@ -111,7 +110,6 @@
     &:hover {
       background-color: var(--cbp-color-interactive-secondary-darker);
       color: var(--cbp-color-interactive-secondary-lighter);
-      font-weight: var(--cbp-font-weight-bold);
     }
 
     // Remove !important color during Link component refactor

packages/vanilla/src/sass/components/footer/_internal.scss

@@ -32,6 +32,7 @@
   & a[href] {
     color: var(--cbp-color-interactive-secondary-lighter);
     display: inline-block;
+    border: 0;
 
     &:hover {
       background-color: var(--cbp-color-interactive-secondary-darker);
@@ -59,13 +60,8 @@
     padding: var(--cbp-font-size-button) 0 var(--cbp-font-size-button) var(--cbp-space-5x); // no spacing token for 0.875 height of button = 44px
     text-decoration: none;
     text-transform: uppercase;
+    letter-spacing: var(--cbp-letter-spacing-loose);
     width: 100%;
-
-    // TODO: fix bouncing
-    &:hover,
-    &:focus {
-      font-weight: var(--cbp-font-weight-bold);
-    }
   }
 }
 
@@ -150,6 +146,7 @@
   }
 }
 
+/* Medium breakpoint or larger */
 @media (min-width: $cbp-breakpoint-md) {
   .cbp-footer > nav > ul {
     display: flex;
@@ -161,11 +158,6 @@
     }
   }
 
-  .cbp-footer__info {
-    padding-top: var(--cbp-space-4x);
-    padding-bottom: var(--cbp-space-4x);
-  }
-
   .cbp-footer__support > ul {
     flex-direction: row;
     flex-wrap: wrap;
@@ -183,13 +175,15 @@
   }
 }
 
+/* Large breakpoint or larger */
 @media (min-width: $cbp-breakpoint-lg) {
   .cbp-footer__info {
     display: flex;
     flex-direction: row;
   }
 }
 
+/* XL breakpoint or larger */
 @media (min-width: $cbp-breakpoint-xl) {
   .cbp-footer > nav > ul {
     padding-left: var(--cbp-space-11x);