remove borders from components

docs/assets/css/docs.css

@@ -597,6 +597,11 @@ code {
   border-bottom: 0;
 }
 
+@media screen and (min-width: 768px) {
+  .component {
+    border-bottom: 0;
+  }
+}
 .component-title {
   margin-bottom: 10px;
   font-size: 24px;

docs/components.html

@@ -1262,7 +1262,7 @@ window.addEventListener('push', myFunction);
 
       </article>
 
-      <!-- Ratchicons -->
+    <!-- Ratchicons -->
     <article class="component no-border" id="ratchicons">
       <h3 class="component-title">Ratchicons</h3>
       <p class="component-description">Use Ratchicons in your application to help inform interactions.</p>

sass/docs.scss

@@ -623,10 +623,17 @@ code {
   margin-right: -15px;
   border-bottom: 1px solid #ddd;
 
+  // Added to the last component so the footer
+  // doesn't create a double border.
   &.no-border {
     border-bottom: 0;
   }
 }
+@media screen and (min-width: 768px) {
+  .component {
+    border-bottom: 0;
+  }
+}
 .component-title {
   margin-bottom: 10px;
   font-size: 24px;