From 67c79c46294ca4147fb51897e2667f15fb5518eb Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Mon, 15 Jan 2018 17:23:32 +0000
Subject: [PATCH] fix(my-joy-beta): create instance - 8 col descriptions

---
 .../__snapshots__/affinity.spec.js.snap       |    4 +-
 .../__snapshots__/images.spec.js.snap         |  195 +-
 .../__tests__/__snapshots__/name.spec.js.snap |  156 +-
 .../__snapshots__/network.spec.js.snap        | 4444 ++++++++++-------
 .../components/create-instance/description.js |   14 +
 .../components/create-instance/firewall.js    |   17 +-
 .../src/components/create-instance/image.js   |   27 +-
 .../src/components/create-instance/name.js    |   10 +-
 .../src/components/create-instance/network.js |  291 +-
 .../__snapshots__/metadata.spec.js.snap       |  288 +-
 .../__snapshots__/networks.spec.js.snap       | 1488 +++---
 .../__tests__/__snapshots__/tag.spec.js.snap  |  288 +-
 .../containers/create-instance/affinity.js    |   25 +-
 .../src/containers/create-instance/cns.js     |   27 +-
 .../containers/create-instance/firewall.js    |   28 +-
 .../containers/create-instance/metadata.js    |   25 +-
 .../containers/create-instance/networks.js    |   30 +-
 .../src/containers/create-instance/package.js |   26 +-
 .../src/containers/create-instance/tags.js    |   23 +-
 19 files changed, 4323 insertions(+), 3083 deletions(-)
 create mode 100644 packages/my-joy-beta/src/components/create-instance/description.js

diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap
index af1e25dc..4f492427 100644
--- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap
@@ -459,7 +459,7 @@ exports[`renders <Rule/> without throwing 1`] = `
               equalling
             </option>
             <option
-              value="!equalling"
+              value="not-equalling"
             >
               not equalling
             </option>
@@ -925,7 +925,7 @@ exports[`renders <Rule/> without throwing 2`] = `
               equalling
             </option>
             <option
-              value="!equalling"
+              value="not-equalling"
             >
               not equalling
             </option>
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap
index 093598b1..8cb605ab 100644
--- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap
@@ -13,19 +13,19 @@ exports[`renders <Images Images="test" /> without throwing 1`] = `
 `;
 
 exports[`renders <Images expanded /> without throwing 1`] = `
-.c0 {
+.c2 {
   margin-bottom: 1rem;
 }
 
-.c2 {
+.c4 {
   margin-bottom: 2rem;
 }
 
-.c10 {
+.c11 {
   margin-top: 2rem;
 }
 
-.c4 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -49,7 +49,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   align-items: center;
 }
 
-.c9 {
+.c0 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -69,26 +69,35 @@ exports[`renders <Images expanded /> without throwing 1`] = `
 }
 
 .c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
-.c13 {
+.c14 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -101,30 +110,30 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c13::-moz-focus-inner,
-.c13[type='button']::-moz-focus-inner,
-.c13[type='reset']::-moz-focus-inner,
-.c13[type='submit']::-moz-focus-inner {
+.c14::-moz-focus-inner,
+.c14[type='button']::-moz-focus-inner,
+.c14[type='reset']::-moz-focus-inner,
+.c14[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c13:-moz-focusring,
-.c13[type='button']:-moz-focusring,
-.c13[type='reset']:-moz-focusring,
-.c13[type='submit']:-moz-focusring {
+.c14:-moz-focusring,
+.c14[type='button']:-moz-focusring,
+.c14[type='reset']:-moz-focusring,
+.c14[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c13 + button {
+.c14 + button {
   margin-left: 0.375rem;
 }
 
-.c12 {
+.c13 {
   display: inline-block;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -169,50 +178,50 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c11:focus {
+.c12:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c11:hover {
+.c12:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c11:active,
-.c11:active:hover,
-.c11:active:focus {
+.c12:active,
+.c12:active:hover,
+.c12:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c11[disabled] {
+.c12[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c11:focus {
+.c12:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c11:hover {
+.c12:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c11:active,
-.c11:active:hover,
-.c11:active:focus {
+.c12:active,
+.c12:active:hover,
+.c12:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c3 {
+.c5 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -227,7 +236,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c5 {
+.c7 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -240,7 +249,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c6 {
+.c8 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -253,29 +262,29 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   align-items: center;
 }
 
-.c7 {
+.c9 {
   display: none;
 }
 
-.c7:checked + label {
+.c9:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c7:checked + label:after {
+.c9:checked + label:after {
   left: 50%;
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c7:checked + label:active {
+.c9:checked + label:active {
   box-shadow: none;
 }
 
-.c7:checked + label:active:after {
+.c9:checked + label:active:after {
   margin-left: -00.75rem;
 }
 
-.c8 {
+.c10 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -295,28 +304,28 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
-.c8::selection {
+.c10::selection {
   background: none;
 }
 
-.c8:active {
+.c10:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c8:active:after {
+.c10:active:after {
   padding-right: 0.75rem;
 }
 
-.c8:hover {
+.c10:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c8:hover:after {
+.c10:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c8:after,
-.c8:before {
+.c10:after,
+.c10:before {
   position: relative;
   display: block;
   content: '';
@@ -324,7 +333,7 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   height: 100%;
 }
 
-.c8:after {
+.c10:after {
   left: 0;
   border-radius: 2em;
   background: rgb(255,255,255);
@@ -333,71 +342,99 @@ exports[`renders <Images expanded /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c8:active {
+.c10:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c8:active:after {
+.c10:active:after {
   padding-right: 0.75rem;
 }
 
-.c8:before {
+.c10:before {
   display: none;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <form
   onSubmit={undefined}
 >
   <div
     className="c0"
   >
-    <p
+    <div
       className="c1"
     >
-      Hardware virtual machines are generally used for non-containerized applications. Infrastructure containers are generally for running any Linux image on secure, bare metal containers.
-       
-      <a
-        href="https://docs.joyent.com/private-cloud/images"
-        rel="noopener noreferrer"
-        target="_blank"
+      <div
+        className="c2"
       >
-        Read the docs
-      </a>
-    </p>
+        <p
+          className="c3"
+        >
+          Hardware virtual machines are generally used for non-containerized applications. Infrastructure containers are generally for running any Linux image on secure, bare metal containers.
+           
+          <a
+            href="https://docs.joyent.com/private-cloud/images"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Read the docs
+          </a>
+        </p>
+      </div>
+    </div>
   </div>
   <div
-    className="c2"
+    className="c4"
   >
     <div
-      className="c3"
+      className="c5"
       name="vms"
       role="group"
       style={undefined}
     >
       <div
-        className="c4"
+        className="c6"
       >
         <label
-          className="c5"
+          className="c7"
           htmlFor="Y"
         >
           Infrastructure Container 
         </label>
         <div
-          className="c6"
+          className="c8"
         >
           <input
             checked={undefined}
-            className="c7"
+            className="c9"
             id="Y"
             type="checkbox"
           />
           <label
-            className="c8"
+            className="c10"
             htmlFor="Y"
           />
           <label
-            className="c5"
+            className="c7"
             htmlFor="Y"
           >
              
@@ -408,13 +445,13 @@ exports[`renders <Images expanded /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c9"
+    className="c0"
   />
   <div
-    className="c10"
+    className="c11"
   >
     <button
-      className="c11 c12 c13"
+      className="c12 c13 c14"
       disabled={true}
       href=""
       type="submit"
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap
index 3c3000b4..51a8232a 100644
--- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap
@@ -7,31 +7,59 @@ exports[`renders <Name /> without throwing 1`] = `
 `;
 
 exports[`renders <Name expanded /> without throwing 1`] = `
-.c0 {
+.c2 {
   margin-bottom: 1rem;
 }
 
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
 .c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
-.c8 {
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -44,30 +72,30 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c8::-moz-focus-inner,
-.c8[type='button']::-moz-focus-inner,
-.c8[type='reset']::-moz-focus-inner,
-.c8[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c8:-moz-focusring,
-.c8[type='button']:-moz-focusring,
-.c8[type='reset']:-moz-focusring,
-.c8[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c8 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c7 {
+.c9 {
   display: inline-block;
 }
 
-.c6 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -107,33 +135,33 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c6:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c6:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c6:active,
-.c6:active:hover,
-.c6:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c6[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c2 {
+.c4 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -149,7 +177,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   width: 100%;
 }
 
-.c4 {
+.c6 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -173,45 +201,45 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   outline: 0;
 }
 
-.c4::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4::-moz-placeholder {
+.c6::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4:invalid {
+.c6:invalid {
   box-shadow: none;
 }
 
-.c4:disabled {
+.c6:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c4:disabled::-webkit-input-placeholder {
+.c6:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4:disabled::-moz-placeholder {
+.c6:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4:disabled:-ms-input-placeholder {
+.c6:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c4:focus {
+.c6:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c3 {
+.c5 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -224,7 +252,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c5 {
+.c7 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -237,41 +265,69 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <form
   onSubmit={undefined}
 >
   <div
     className="c0"
   >
-    <p
+    <div
       className="c1"
     >
-      Your instance name will be used to identify this specific instance.
-    </p>
+      <div
+        className="c2"
+      >
+        <p
+          className="c3"
+        >
+          Your instance name will be used to identify this specific instance.
+        </p>
+      </div>
+    </div>
   </div>
   <div
-    className="c2"
+    className="c4"
     name="name"
     role="group"
     style={undefined}
   >
     <label
-      className="c3"
+      className="c5"
       htmlFor="Y"
     >
       Name
     </label>
     <input
-      className="c4"
+      className="c6"
       disabled={false}
       id="Y"
     />
     <label
-      className="c5"
+      className="c7"
     />
   </div>
   <button
-    className="c6 c7 c8"
+    className="c8 c9 c10"
     disabled={undefined}
     href=""
     type="submit"
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/network.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/network.spec.js.snap
index 4c027a53..4558f5b1 100644
--- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/network.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/network.spec.js.snap
@@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Network /> without throwing 1`] = `
-.c0 {
+.c2 {
   margin-bottom: 2rem;
 }
 
-.c14 {
+.c16 {
   margin-right: 2rem;
 }
 
-.c17 {
+.c19 {
   margin-right: 0.25rem;
 }
 
-.c12 {
+.c14 {
   padding: 2rem;
 }
 
-.c13 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,7 +37,7 @@ exports[`renders <Network /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c16 {
+.c18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -61,7 +61,7 @@ exports[`renders <Network /> without throwing 1`] = `
   align-items: center;
 }
 
-.c15 {
+.c17 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -77,27 +77,55 @@ exports[`renders <Network /> without throwing 1`] = `
   flex-shrink: 1;
 }
 
-.c18 {
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c20 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c18 + p,
-.c18 + small,
-.c18 + h1,
-.c18 + h2,
-.c18 + label,
-.c18 + h3,
-.c18 + h4,
-.c18 + h5,
-.c18 + div,
-.c18 + span {
+.c20 + p,
+.c20 + small,
+.c20 + h1,
+.c20 + h2,
+.c20 + label,
+.c20 + h3,
+.c20 + h4,
+.c20 + h5,
+.c20 + div,
+.c20 + span {
   padding-bottom: 2.25rem;
 }
 
-.c10 {
+.c12 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -105,20 +133,20 @@ exports[`renders <Network /> without throwing 1`] = `
   margin: 0;
 }
 
-.c10 + p,
-.c10 + small,
-.c10 + h1,
-.c10 + h2,
-.c10 + label,
-.c10 + h3,
-.c10 + h4,
-.c10 + h5,
-.c10 + div,
-.c10 + span {
+.c12 + p,
+.c12 + small,
+.c12 + h1,
+.c12 + h2,
+.c12 + label,
+.c12 + h3,
+.c12 + h4,
+.c12 + h5,
+.c12 + div,
+.c12 + span {
   margin-top: 0.75rem;
 }
 
-.c1 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -141,7 +169,7 @@ exports[`renders <Network /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c11 {
+.c13 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -177,15 +205,15 @@ exports[`renders <Network /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c11 > [name='card']:not(:last-child) {
+.c13 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c11 > [name='card']:last-child {
+.c13 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -220,12 +248,12 @@ exports[`renders <Network /> without throwing 1`] = `
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c2 button {
+.c4 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c3 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -278,7 +306,7 @@ exports[`renders <Network /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c9 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -336,7 +364,7 @@ exports[`renders <Network /> without throwing 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -345,59 +373,59 @@ exports[`renders <Network /> without throwing 1`] = `
   display: none;
 }
 
-.c7[type='checkbox'],
-.c7[type='radio'] {
+.c9[type='checkbox'],
+.c9[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c7[type='number']::-webkit-inner-spin-button,
-.c7[type='number']::-webkit-outer-spin-button {
+.c9[type='number']::-webkit-inner-spin-button,
+.c9[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c7[type='search'] {
+.c9[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c7[type='search']::-webkit-search-cancel-button,
-.c7[type='search']::-webkit-search-decoration {
+.c9[type='search']::-webkit-search-cancel-button,
+.c9[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c7::-webkit-file-upload-button {
+.c9::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c7:checked + label::after {
+.c9:checked + label::after {
   opacity: 1;
 }
 
-.c7:selected + label::after {
+.c9:selected + label::after {
   opacity: 1;
 }
 
-.c7:checked + label {
+.c9:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:selected + label {
+.c9:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:disabled + label {
+.c9:disabled + label {
   background-color: rgb(249,249,249);
 }
 
-.c8 {
+.c10 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -415,7 +443,7 @@ exports[`renders <Network /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c8::after {
+.c10::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -432,7 +460,7 @@ exports[`renders <Network /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c6 {
+.c8 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -441,7 +469,7 @@ exports[`renders <Network /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c5 {
+.c7 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -453,11 +481,11 @@ exports[`renders <Network /> without throwing 1`] = `
   align-items: center;
 }
 
-.c5 label {
+.c7 label {
   font-weight: 400;
 }
 
-.c4 {
+.c6 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -472,121 +500,95 @@ exports[`renders <Network /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
   className="c0"
 >
   <div
     className="c1"
-    disabled={false}
-    name="card"
   >
     <div
       className="c2"
-      disabled={false}
-      name="card-header"
     >
       <div
         className="c3"
         disabled={false}
-        name="card-header-box"
+        name="card"
       >
         <div
           className="c4"
-          name={undefined}
-          role="group"
-          style={undefined}
-        >
-          <li
-            className="c5"
-          >
-            <div
-              checked={false}
-              className="c6"
-              disabled={false}
-              id="Z"
-              type="checkbox"
-            >
-              <input
-                checked={false}
-                className="c7"
-                disabled={false}
-                id="a"
-                type="checkbox"
-              />
-              <label
-                className="c8"
-                htmlFor="a"
-              />
-            </div>
-          </li>
-        </div>
-      </div>
-      <div
-        className="c9"
-        disabled={false}
-        name="card-header-meta"
-      >
-        <h4
-          className="c10"
-        />
-      </div>
-    </div>
-    <div
-      className="c11"
-      name="card-outlet"
-    >
-      <div
-        className="c12"
-      >
-        <div
-          className="c13"
+          disabled={false}
+          name="card-header"
         >
           <div
-            className="c14"
+            className="c5"
+            disabled={false}
+            name="card-header-box"
           >
             <div
-              className="c15"
+              className="c6"
+              name={undefined}
+              role="group"
+              style={undefined}
             >
-              <div
-                className="c16"
+              <li
+                className="c7"
               >
                 <div
-                  className="c15"
+                  checked={false}
+                  className="c8"
+                  disabled={false}
+                  id="Z"
+                  type="checkbox"
                 >
-                  <div
-                    className="c17"
-                  >
-                    <svg
-                      className=""
-                      height="16"
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 12 16"
-                      width="12"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                        fill="rgba(73, 73, 73, 1)"
-                      />
-                    </svg>
-                  </div>
+                  <input
+                    checked={false}
+                    className="c9"
+                    disabled={false}
+                    id="a"
+                    type="checkbox"
+                  />
+                  <label
+                    className="c10"
+                    htmlFor="a"
+                  />
                 </div>
-                <div
-                  className="c15"
-                >
-                  <p
-                    className="c18"
-                  >
-                    Private
-                  </p>
-                </div>
-              </div>
+              </li>
             </div>
           </div>
+          <div
+            className="c11"
+            disabled={false}
+            name="card-header-meta"
+          >
+            <h4
+              className="c12"
+            />
+          </div>
+        </div>
+        <div
+          className="c13"
+          name="card-outlet"
+        >
           <div
             className="c14"
           >
@@ -597,39 +599,93 @@ exports[`renders <Network /> without throwing 1`] = `
                 className="c16"
               >
                 <div
-                  className="c15"
+                  className="c17"
                 >
                   <div
-                    className="c17"
-                  >
-                    <svg
-                      className=""
-                      height="13"
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 9 13"
-                      width="9"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
-                        fill="rgba(73, 73, 73, 1)"
-                        fillRule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                </div>
-                <div
-                  className="c15"
-                >
-                  <p
                     className="c18"
                   >
-                    Data center network
-                  </p>
+                    <div
+                      className="c17"
+                    >
+                      <div
+                        className="c19"
+                      >
+                        <svg
+                          className=""
+                          height="16"
+                          style={
+                            Object {
+                              "transform": "rotate(0deg)",
+                            }
+                          }
+                          viewBox="0 0 12 16"
+                          width="12"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                            fill="rgba(73, 73, 73, 1)"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      className="c17"
+                    >
+                      <p
+                        className="c20"
+                      >
+                        Private
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="c16"
+              >
+                <div
+                  className="c17"
+                >
+                  <div
+                    className="c18"
+                  >
+                    <div
+                      className="c17"
+                    >
+                      <div
+                        className="c19"
+                      >
+                        <svg
+                          className=""
+                          height="13"
+                          style={
+                            Object {
+                              "transform": "rotate(0deg)",
+                            }
+                          }
+                          viewBox="0 0 9 13"
+                          width="9"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
+                            fill="rgba(73, 73, 73, 1)"
+                            fillRule="evenodd"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      className="c17"
+                    >
+                      <p
+                        className="c20"
+                      >
+                        Data center network
+                      </p>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -642,28 +698,28 @@ exports[`renders <Network /> without throwing 1`] = `
 `;
 
 exports[`renders <Network /> without throwing 2`] = `
-.c9 {
+.c10 {
   margin-right: 2rem;
 }
 
-.c11 {
+.c12 {
   margin-right: 0.25rem;
 }
 
-.c0 {
+.c2 {
   display: inline-block;
   margin-top: 1rem;
   margin-right: 1rem;
 }
 
-.c4 {
+.c6 {
   margin-top: 0.5rem;
   margin-right: 1rem;
   margin-bottom: 0.5rem;
   margin-left: 1rem;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -683,7 +739,7 @@ exports[`renders <Network /> without throwing 2`] = `
   align-content: stretch;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -707,7 +763,7 @@ exports[`renders <Network /> without throwing 2`] = `
   align-items: center;
 }
 
-.c2 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -730,7 +786,7 @@ exports[`renders <Network /> without throwing 2`] = `
   flex-direction: column;
 }
 
-.c3 {
+.c5 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -746,27 +802,7 @@ exports[`renders <Network /> without throwing 2`] = `
   flex-shrink: 1;
 }
 
-.c5 {
-  color: rgba(73,73,73,1);
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
-  padding-bottom: 2.25rem;
-}
-
-.c7 {
+.c0 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -785,13 +821,42 @@ exports[`renders <Network /> without throwing 2`] = `
   margin-left: -0.5rem;
 }
 
-.c6 {
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c7 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c8 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c1 {
+.c3 {
   display: inline-block;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -799,6 +864,26 @@ exports[`renders <Network /> without throwing 2`] = `
   min-width: 18.75rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
   className="c0"
 >
@@ -808,25 +893,6 @@ exports[`renders <Network /> without throwing 2`] = `
     <div
       className="c2"
     >
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
-          <p
-            className="c5"
-          />
-        </div>
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c6 c7"
-          height="0.0625rem"
-        />
-      </div>
       <div
         className="c3"
       >
@@ -834,98 +900,125 @@ exports[`renders <Network /> without throwing 2`] = `
           className="c4"
         >
           <div
-            className="c8"
+            className="c5"
           >
             <div
-              className="c9"
+              className="c6"
+            >
+              <p
+                className="c7"
+              />
+            </div>
+          </div>
+          <div
+            className="c5"
+          >
+            <div
+              className="c8 c0"
+              height="0.0625rem"
+            />
+          </div>
+          <div
+            className="c5"
+          >
+            <div
+              className="c6"
             >
               <div
-                className="c3"
+                className="c9"
               >
                 <div
                   className="c10"
                 >
                   <div
-                    className="c3"
+                    className="c5"
                   >
                     <div
                       className="c11"
                     >
-                      <svg
-                        className=""
-                        height="16"
-                        style={
-                          Object {
-                            "transform": "rotate(0deg)",
-                          }
-                        }
-                        viewBox="0 0 12 16"
-                        width="12"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        className="c5"
                       >
-                        <path
-                          d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                          fill="rgba(73, 73, 73, 1)"
-                        />
-                      </svg>
+                        <div
+                          className="c12"
+                        >
+                          <svg
+                            className=""
+                            height="16"
+                            style={
+                              Object {
+                                "transform": "rotate(0deg)",
+                              }
+                            }
+                            viewBox="0 0 12 16"
+                            width="12"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                              fill="rgba(73, 73, 73, 1)"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        className="c5"
+                      >
+                        <p
+                          className="c7"
+                        >
+                          Private
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div
-                    className="c3"
-                  >
-                    <p
-                      className="c5"
-                    >
-                      Private
-                    </p>
-                  </div>
                 </div>
-              </div>
-            </div>
-            <div
-              className=""
-            >
-              <div
-                className="c3"
-              >
                 <div
-                  className="c10"
+                  className=""
                 >
                   <div
-                    className="c3"
+                    className="c5"
                   >
                     <div
                       className="c11"
                     >
-                      <svg
-                        className=""
-                        height="13"
-                        style={
-                          Object {
-                            "transform": "rotate(0deg)",
-                          }
-                        }
-                        viewBox="0 0 9 13"
-                        width="9"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        className="c5"
                       >
-                        <path
-                          d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
-                          fill="rgba(73, 73, 73, 1)"
-                          fillRule="evenodd"
-                        />
-                      </svg>
+                        <div
+                          className="c12"
+                        >
+                          <svg
+                            className=""
+                            height="13"
+                            style={
+                              Object {
+                                "transform": "rotate(0deg)",
+                              }
+                            }
+                            viewBox="0 0 9 13"
+                            width="9"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
+                              fill="rgba(73, 73, 73, 1)"
+                              fillRule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        className="c5"
+                      >
+                        <p
+                          className="c7"
+                        >
+                          Data center network
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div
-                    className="c3"
-                  >
-                    <p
-                      className="c5"
-                    >
-                      Data center network
-                    </p>
-                  </div>
                 </div>
               </div>
             </div>
@@ -938,27 +1031,27 @@ exports[`renders <Network /> without throwing 2`] = `
 `;
 
 exports[`renders <Network {...network} /> without throwing 1`] = `
-.c0 {
+.c2 {
   margin-bottom: 2rem;
 }
 
-.c16 {
+.c18 {
   margin-right: 2rem;
 }
 
-.c19 {
+.c21 {
   margin-right: 0.25rem;
 }
 
-.c13 {
+.c15 {
   margin-bottom: 1rem;
 }
 
-.c12 {
+.c14 {
   padding: 2rem;
 }
 
-.c15 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -978,7 +1071,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c18 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1002,7 +1095,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   align-items: center;
 }
 
-.c17 {
+.c19 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1018,27 +1111,55 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   flex-shrink: 1;
 }
 
-.c14 {
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c16 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c14 + p,
-.c14 + small,
-.c14 + h1,
-.c14 + h2,
-.c14 + label,
-.c14 + h3,
-.c14 + h4,
-.c14 + h5,
-.c14 + div,
-.c14 + span {
+.c16 + p,
+.c16 + small,
+.c16 + h1,
+.c16 + h2,
+.c16 + label,
+.c16 + h3,
+.c16 + h4,
+.c16 + h5,
+.c16 + div,
+.c16 + span {
   padding-bottom: 2.25rem;
 }
 
-.c10 {
+.c12 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1046,20 +1167,20 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   margin: 0;
 }
 
-.c10 + p,
-.c10 + small,
-.c10 + h1,
-.c10 + h2,
-.c10 + label,
-.c10 + h3,
-.c10 + h4,
-.c10 + h5,
-.c10 + div,
-.c10 + span {
+.c12 + p,
+.c12 + small,
+.c12 + h1,
+.c12 + h2,
+.c12 + label,
+.c12 + h3,
+.c12 + h4,
+.c12 + h5,
+.c12 + div,
+.c12 + span {
   margin-top: 0.75rem;
 }
 
-.c1 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1082,7 +1203,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c11 {
+.c13 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1118,15 +1239,15 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c11 > [name='card']:not(:last-child) {
+.c13 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c11 > [name='card']:last-child {
+.c13 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1161,12 +1282,12 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c2 button {
+.c4 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c3 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1219,7 +1340,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c9 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1277,7 +1398,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1286,59 +1407,59 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   display: none;
 }
 
-.c7[type='checkbox'],
-.c7[type='radio'] {
+.c9[type='checkbox'],
+.c9[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c7[type='number']::-webkit-inner-spin-button,
-.c7[type='number']::-webkit-outer-spin-button {
+.c9[type='number']::-webkit-inner-spin-button,
+.c9[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c7[type='search'] {
+.c9[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c7[type='search']::-webkit-search-cancel-button,
-.c7[type='search']::-webkit-search-decoration {
+.c9[type='search']::-webkit-search-cancel-button,
+.c9[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c7::-webkit-file-upload-button {
+.c9::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c7:checked + label::after {
+.c9:checked + label::after {
   opacity: 1;
 }
 
-.c7:selected + label::after {
+.c9:selected + label::after {
   opacity: 1;
 }
 
-.c7:checked + label {
+.c9:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:selected + label {
+.c9:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:disabled + label {
+.c9:disabled + label {
   background-color: rgb(249,249,249);
 }
 
-.c8 {
+.c10 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -1356,7 +1477,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c8::after {
+.c10::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -1373,7 +1494,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c6 {
+.c8 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -1382,7 +1503,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c5 {
+.c7 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1394,11 +1515,11 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   align-items: center;
 }
 
-.c5 label {
+.c7 label {
   font-weight: 400;
 }
 
-.c4 {
+.c6 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1413,135 +1534,109 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
   className="c0"
 >
   <div
     className="c1"
-    disabled={false}
-    name="card"
   >
     <div
       className="c2"
-      disabled={false}
-      name="card-header"
     >
       <div
         className="c3"
         disabled={false}
-        name="card-header-box"
+        name="card"
       >
         <div
           className="c4"
-          name="1"
-          role="group"
-          style={undefined}
-        >
-          <li
-            className="c5"
-          >
-            <div
-              checked={false}
-              className="c6"
-              disabled={false}
-              id="bb"
-              type="checkbox"
-            >
-              <input
-                checked={false}
-                className="c7"
-                disabled={false}
-                id="bc"
-                type="checkbox"
-              />
-              <label
-                className="c8"
-                htmlFor="bc"
-              />
-            </div>
-          </li>
-        </div>
-      </div>
-      <div
-        className="c9"
-        disabled={false}
-        name="card-header-meta"
-      >
-        <h4
-          className="c10"
-        >
-          name
-        </h4>
-      </div>
-    </div>
-    <div
-      className="c11"
-      name="card-outlet"
-    >
-      <div
-        className="c12"
-      >
-        <div
-          className="c13"
-        >
-          <p
-            className="c14"
-          >
-            description
-          </p>
-        </div>
-        <div
-          className="c15"
+          disabled={false}
+          name="card-header"
         >
           <div
-            className="c16"
+            className="c5"
+            disabled={false}
+            name="card-header-box"
           >
             <div
-              className="c17"
+              className="c6"
+              name="1"
+              role="group"
+              style={undefined}
             >
-              <div
-                className="c18"
+              <li
+                className="c7"
               >
                 <div
-                  className="c17"
+                  checked={false}
+                  className="c8"
+                  disabled={false}
+                  id="bb"
+                  type="checkbox"
                 >
-                  <div
-                    className="c19"
-                  >
-                    <svg
-                      className=""
-                      height="16"
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 12 16"
-                      width="12"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                        fill="rgba(73, 73, 73, 1)"
-                      />
-                    </svg>
-                  </div>
+                  <input
+                    checked={false}
+                    className="c9"
+                    disabled={false}
+                    id="bc"
+                    type="checkbox"
+                  />
+                  <label
+                    className="c10"
+                    htmlFor="bc"
+                  />
                 </div>
-                <div
-                  className="c17"
-                >
-                  <p
-                    className="c14"
-                  >
-                    Private
-                  </p>
-                </div>
-              </div>
+              </li>
             </div>
           </div>
           <div
-            className="c16"
+            className="c11"
+            disabled={false}
+            name="card-header-meta"
           >
+            <h4
+              className="c12"
+            >
+              name
+            </h4>
+          </div>
+        </div>
+        <div
+          className="c13"
+          name="card-outlet"
+        >
+          <div
+            className="c14"
+          >
+            <div
+              className="c15"
+            >
+              <p
+                className="c16"
+              >
+                description
+              </p>
+            </div>
             <div
               className="c17"
             >
@@ -1549,39 +1644,93 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
                 className="c18"
               >
                 <div
-                  className="c17"
+                  className="c19"
                 >
                   <div
-                    className="c19"
+                    className="c20"
                   >
-                    <svg
-                      className=""
-                      height="13"
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 9 13"
-                      width="9"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      className="c19"
                     >
-                      <path
-                        d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
-                        fill="rgba(73, 73, 73, 1)"
-                        fillRule="evenodd"
-                      />
-                    </svg>
+                      <div
+                        className="c21"
+                      >
+                        <svg
+                          className=""
+                          height="16"
+                          style={
+                            Object {
+                              "transform": "rotate(0deg)",
+                            }
+                          }
+                          viewBox="0 0 12 16"
+                          width="12"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                            fill="rgba(73, 73, 73, 1)"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      className="c19"
+                    >
+                      <p
+                        className="c16"
+                      >
+                        Private
+                      </p>
+                    </div>
                   </div>
                 </div>
+              </div>
+              <div
+                className="c18"
+              >
                 <div
-                  className="c17"
+                  className="c19"
                 >
-                  <p
-                    className="c14"
+                  <div
+                    className="c20"
                   >
-                    Data center network
-                  </p>
+                    <div
+                      className="c19"
+                    >
+                      <div
+                        className="c21"
+                      >
+                        <svg
+                          className=""
+                          height="13"
+                          style={
+                            Object {
+                              "transform": "rotate(0deg)",
+                            }
+                          }
+                          viewBox="0 0 9 13"
+                          width="9"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
+                            fill="rgba(73, 73, 73, 1)"
+                            fillRule="evenodd"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      className="c19"
+                    >
+                      <p
+                        className="c16"
+                      >
+                        Data center network
+                      </p>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -1594,28 +1743,28 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
 `;
 
 exports[`renders <Network {...network} /> without throwing 2`] = `
-.c9 {
+.c10 {
   margin-right: 2rem;
 }
 
-.c11 {
+.c12 {
   margin-right: 0.25rem;
 }
 
-.c0 {
+.c2 {
   display: inline-block;
   margin-top: 1rem;
   margin-right: 1rem;
 }
 
-.c4 {
+.c6 {
   margin-top: 0.5rem;
   margin-right: 1rem;
   margin-bottom: 0.5rem;
   margin-left: 1rem;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1635,7 +1784,7 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
   align-content: stretch;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1659,7 +1808,7 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
   align-items: center;
 }
 
-.c2 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1682,7 +1831,7 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
   flex-direction: column;
 }
 
-.c3 {
+.c5 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1698,27 +1847,7 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
   flex-shrink: 1;
 }
 
-.c5 {
-  color: rgba(73,73,73,1);
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
-  padding-bottom: 2.25rem;
-}
-
-.c7 {
+.c0 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1737,13 +1866,42 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
   margin-left: -0.5rem;
 }
 
-.c6 {
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c7 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c8 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c1 {
+.c3 {
   display: inline-block;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1751,6 +1909,26 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
   min-width: 18.75rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
   className="c0"
 >
@@ -1766,120 +1944,128 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
         <div
           className="c4"
         >
-          <p
+          <div
             className="c5"
           >
-            name
-          </p>
-        </div>
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c6 c7"
-          height="0.0625rem"
-        />
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
+            <div
+              className="c6"
+            >
+              <p
+                className="c7"
+              >
+                name
+              </p>
+            </div>
+          </div>
           <div
-            className="c8"
+            className="c5"
           >
             <div
-              className="c9"
+              className="c8 c0"
+              height="0.0625rem"
+            />
+          </div>
+          <div
+            className="c5"
+          >
+            <div
+              className="c6"
             >
               <div
-                className="c3"
+                className="c9"
               >
                 <div
                   className="c10"
                 >
                   <div
-                    className="c3"
+                    className="c5"
                   >
                     <div
                       className="c11"
                     >
-                      <svg
-                        className=""
-                        height="16"
-                        style={
-                          Object {
-                            "transform": "rotate(0deg)",
-                          }
-                        }
-                        viewBox="0 0 12 16"
-                        width="12"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        className="c5"
                       >
-                        <path
-                          d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                          fill="rgba(73, 73, 73, 1)"
-                        />
-                      </svg>
+                        <div
+                          className="c12"
+                        >
+                          <svg
+                            className=""
+                            height="16"
+                            style={
+                              Object {
+                                "transform": "rotate(0deg)",
+                              }
+                            }
+                            viewBox="0 0 12 16"
+                            width="12"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                              fill="rgba(73, 73, 73, 1)"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        className="c5"
+                      >
+                        <p
+                          className="c7"
+                        >
+                          Private
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div
-                    className="c3"
-                  >
-                    <p
-                      className="c5"
-                    >
-                      Private
-                    </p>
-                  </div>
                 </div>
-              </div>
-            </div>
-            <div
-              className=""
-            >
-              <div
-                className="c3"
-              >
                 <div
-                  className="c10"
+                  className=""
                 >
                   <div
-                    className="c3"
+                    className="c5"
                   >
                     <div
                       className="c11"
                     >
-                      <svg
-                        className=""
-                        height="13"
-                        style={
-                          Object {
-                            "transform": "rotate(0deg)",
-                          }
-                        }
-                        viewBox="0 0 9 13"
-                        width="9"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        className="c5"
                       >
-                        <path
-                          d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
-                          fill="rgba(73, 73, 73, 1)"
-                          fillRule="evenodd"
-                        />
-                      </svg>
+                        <div
+                          className="c12"
+                        >
+                          <svg
+                            className=""
+                            height="13"
+                            style={
+                              Object {
+                                "transform": "rotate(0deg)",
+                              }
+                            }
+                            viewBox="0 0 9 13"
+                            width="9"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
+                              fill="rgba(73, 73, 73, 1)"
+                              fillRule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        className="c5"
+                      >
+                        <p
+                          className="c7"
+                        >
+                          Data center network
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div
-                    className="c3"
-                  >
-                    <p
-                      className="c5"
-                    >
-                      Data center network
-                    </p>
-                  </div>
                 </div>
               </div>
             </div>
@@ -1892,27 +2078,27 @@ exports[`renders <Network {...network} /> without throwing 2`] = `
 `;
 
 exports[`renders <Network {...network} /> without throwing 3`] = `
-.c0 {
+.c2 {
   margin-bottom: 2rem;
 }
 
-.c16 {
+.c18 {
   margin-right: 2rem;
 }
 
-.c19 {
+.c21 {
   margin-right: 0.25rem;
 }
 
-.c13 {
+.c15 {
   margin-bottom: 1rem;
 }
 
-.c12 {
+.c14 {
   padding: 2rem;
 }
 
-.c15 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1932,7 +2118,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   align-content: stretch;
 }
 
-.c18 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1956,7 +2142,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   align-items: center;
 }
 
-.c17 {
+.c19 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1972,27 +2158,55 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   flex-shrink: 1;
 }
 
-.c14 {
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c16 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c14 + p,
-.c14 + small,
-.c14 + h1,
-.c14 + h2,
-.c14 + label,
-.c14 + h3,
-.c14 + h4,
-.c14 + h5,
-.c14 + div,
-.c14 + span {
+.c16 + p,
+.c16 + small,
+.c16 + h1,
+.c16 + h2,
+.c16 + label,
+.c16 + h3,
+.c16 + h4,
+.c16 + h5,
+.c16 + div,
+.c16 + span {
   padding-bottom: 2.25rem;
 }
 
-.c10 {
+.c12 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -2000,20 +2214,20 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   margin: 0;
 }
 
-.c10 + p,
-.c10 + small,
-.c10 + h1,
-.c10 + h2,
-.c10 + label,
-.c10 + h3,
-.c10 + h4,
-.c10 + h5,
-.c10 + div,
-.c10 + span {
+.c12 + p,
+.c12 + small,
+.c12 + h1,
+.c12 + h2,
+.c12 + label,
+.c12 + h3,
+.c12 + h4,
+.c12 + h5,
+.c12 + div,
+.c12 + span {
   margin-top: 0.75rem;
 }
 
-.c1 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2036,7 +2250,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c11 {
+.c13 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2072,15 +2286,15 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   background-color: transparent;
 }
 
-.c11 > [name='card']:not(:last-child) {
+.c13 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c11 > [name='card']:last-child {
+.c13 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2115,12 +2329,12 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c2 button {
+.c4 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c3 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2173,7 +2387,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   box-shadow: none;
 }
 
-.c9 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2231,7 +2445,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   color: inherit;
 }
 
-.c7 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2240,59 +2454,59 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   display: none;
 }
 
-.c7[type='checkbox'],
-.c7[type='radio'] {
+.c9[type='checkbox'],
+.c9[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c7[type='number']::-webkit-inner-spin-button,
-.c7[type='number']::-webkit-outer-spin-button {
+.c9[type='number']::-webkit-inner-spin-button,
+.c9[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c7[type='search'] {
+.c9[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c7[type='search']::-webkit-search-cancel-button,
-.c7[type='search']::-webkit-search-decoration {
+.c9[type='search']::-webkit-search-cancel-button,
+.c9[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c7::-webkit-file-upload-button {
+.c9::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c7:checked + label::after {
+.c9:checked + label::after {
   opacity: 1;
 }
 
-.c7:selected + label::after {
+.c9:selected + label::after {
   opacity: 1;
 }
 
-.c7:checked + label {
+.c9:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:selected + label {
+.c9:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:disabled + label {
+.c9:disabled + label {
   background-color: rgb(249,249,249);
 }
 
-.c8 {
+.c10 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -2310,7 +2524,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   height: 1.125rem;
 }
 
-.c8::after {
+.c10::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -2327,7 +2541,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   transform: rotate(-45deg);
 }
 
-.c6 {
+.c8 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -2336,7 +2550,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   cursor: pointer;
 }
 
-.c5 {
+.c7 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2348,11 +2562,11 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   align-items: center;
 }
 
-.c5 label {
+.c7 label {
   font-weight: 400;
 }
 
-.c4 {
+.c6 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -2367,135 +2581,109 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   -webkit-padding-after: 0;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
   className="c0"
 >
   <div
     className="c1"
-    disabled={false}
-    name="card"
   >
     <div
       className="c2"
-      disabled={false}
-      name="card-header"
     >
       <div
         className="c3"
         disabled={false}
-        name="card-header-box"
+        name="card"
       >
         <div
           className="c4"
-          name="1"
-          role="group"
-          style={undefined}
-        >
-          <li
-            className="c5"
-          >
-            <div
-              checked={false}
-              className="c6"
-              disabled={false}
-              id="bd"
-              type="checkbox"
-            >
-              <input
-                checked={false}
-                className="c7"
-                disabled={false}
-                id="be"
-                type="checkbox"
-              />
-              <label
-                className="c8"
-                htmlFor="be"
-              />
-            </div>
-          </li>
-        </div>
-      </div>
-      <div
-        className="c9"
-        disabled={false}
-        name="card-header-meta"
-      >
-        <h4
-          className="c10"
-        >
-          name
-        </h4>
-      </div>
-    </div>
-    <div
-      className="c11"
-      name="card-outlet"
-    >
-      <div
-        className="c12"
-      >
-        <div
-          className="c13"
-        >
-          <p
-            className="c14"
-          >
-            description
-          </p>
-        </div>
-        <div
-          className="c15"
+          disabled={false}
+          name="card-header"
         >
           <div
-            className="c16"
+            className="c5"
+            disabled={false}
+            name="card-header-box"
           >
             <div
-              className="c17"
+              className="c6"
+              name="1"
+              role="group"
+              style={undefined}
             >
-              <div
-                className="c18"
+              <li
+                className="c7"
               >
                 <div
-                  className="c17"
+                  checked={false}
+                  className="c8"
+                  disabled={false}
+                  id="bd"
+                  type="checkbox"
                 >
-                  <div
-                    className="c19"
-                  >
-                    <svg
-                      className=""
-                      height="16"
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 12 16"
-                      width="12"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                        fill="rgba(73, 73, 73, 1)"
-                      />
-                    </svg>
-                  </div>
+                  <input
+                    checked={false}
+                    className="c9"
+                    disabled={false}
+                    id="be"
+                    type="checkbox"
+                  />
+                  <label
+                    className="c10"
+                    htmlFor="be"
+                  />
                 </div>
-                <div
-                  className="c17"
-                >
-                  <p
-                    className="c14"
-                  >
-                    Private
-                  </p>
-                </div>
-              </div>
+              </li>
             </div>
           </div>
           <div
-            className="c16"
+            className="c11"
+            disabled={false}
+            name="card-header-meta"
           >
+            <h4
+              className="c12"
+            >
+              name
+            </h4>
+          </div>
+        </div>
+        <div
+          className="c13"
+          name="card-outlet"
+        >
+          <div
+            className="c14"
+          >
+            <div
+              className="c15"
+            >
+              <p
+                className="c16"
+              >
+                description
+              </p>
+            </div>
             <div
               className="c17"
             >
@@ -2503,39 +2691,93 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
                 className="c18"
               >
                 <div
-                  className="c17"
+                  className="c19"
                 >
                   <div
-                    className="c19"
+                    className="c20"
                   >
-                    <svg
-                      className=""
-                      height="13"
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 9 13"
-                      width="9"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      className="c19"
                     >
-                      <path
-                        d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
-                        fill="rgba(73, 73, 73, 1)"
-                        fillRule="evenodd"
-                      />
-                    </svg>
+                      <div
+                        className="c21"
+                      >
+                        <svg
+                          className=""
+                          height="16"
+                          style={
+                            Object {
+                              "transform": "rotate(0deg)",
+                            }
+                          }
+                          viewBox="0 0 12 16"
+                          width="12"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                            fill="rgba(73, 73, 73, 1)"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      className="c19"
+                    >
+                      <p
+                        className="c16"
+                      >
+                        Private
+                      </p>
+                    </div>
                   </div>
                 </div>
+              </div>
+              <div
+                className="c18"
+              >
                 <div
-                  className="c17"
+                  className="c19"
                 >
-                  <p
-                    className="c14"
+                  <div
+                    className="c20"
                   >
-                    Data center network
-                  </p>
+                    <div
+                      className="c19"
+                    >
+                      <div
+                        className="c21"
+                      >
+                        <svg
+                          className=""
+                          height="13"
+                          style={
+                            Object {
+                              "transform": "rotate(0deg)",
+                            }
+                          }
+                          viewBox="0 0 9 13"
+                          width="9"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
+                            fill="rgba(73, 73, 73, 1)"
+                            fillRule="evenodd"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      className="c19"
+                    >
+                      <p
+                        className="c16"
+                      >
+                        Data center network
+                      </p>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -2548,28 +2790,28 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
 `;
 
 exports[`renders <Network {...network} /> without throwing 4`] = `
-.c9 {
+.c10 {
   margin-right: 2rem;
 }
 
-.c11 {
+.c12 {
   margin-right: 0.25rem;
 }
 
-.c0 {
+.c2 {
   display: inline-block;
   margin-top: 1rem;
   margin-right: 1rem;
 }
 
-.c4 {
+.c6 {
   margin-top: 0.5rem;
   margin-right: 1rem;
   margin-bottom: 0.5rem;
   margin-left: 1rem;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2589,7 +2831,7 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
   align-content: stretch;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2613,7 +2855,7 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
   align-items: center;
 }
 
-.c2 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2636,7 +2878,7 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
   flex-direction: column;
 }
 
-.c3 {
+.c5 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -2652,27 +2894,7 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
   flex-shrink: 1;
 }
 
-.c5 {
-  color: rgba(73,73,73,1);
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
-  padding-bottom: 2.25rem;
-}
-
-.c7 {
+.c0 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2691,13 +2913,42 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
   margin-left: -0.5rem;
 }
 
-.c6 {
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c7 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c8 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c1 {
+.c3 {
   display: inline-block;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -2705,6 +2956,26 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
   min-width: 18.75rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
   className="c0"
 >
@@ -2720,120 +2991,128 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
         <div
           className="c4"
         >
-          <p
+          <div
             className="c5"
           >
-            name
-          </p>
-        </div>
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c6 c7"
-          height="0.0625rem"
-        />
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
+            <div
+              className="c6"
+            >
+              <p
+                className="c7"
+              >
+                name
+              </p>
+            </div>
+          </div>
           <div
-            className="c8"
+            className="c5"
           >
             <div
-              className="c9"
+              className="c8 c0"
+              height="0.0625rem"
+            />
+          </div>
+          <div
+            className="c5"
+          >
+            <div
+              className="c6"
             >
               <div
-                className="c3"
+                className="c9"
               >
                 <div
                   className="c10"
                 >
                   <div
-                    className="c3"
+                    className="c5"
                   >
                     <div
                       className="c11"
                     >
-                      <svg
-                        className=""
-                        height="16"
-                        style={
-                          Object {
-                            "transform": "rotate(0deg)",
-                          }
-                        }
-                        viewBox="0 0 12 16"
-                        width="12"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        className="c5"
                       >
-                        <path
-                          d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                          fill="rgba(73, 73, 73, 1)"
-                        />
-                      </svg>
+                        <div
+                          className="c12"
+                        >
+                          <svg
+                            className=""
+                            height="16"
+                            style={
+                              Object {
+                                "transform": "rotate(0deg)",
+                              }
+                            }
+                            viewBox="0 0 12 16"
+                            width="12"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                              fill="rgba(73, 73, 73, 1)"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        className="c5"
+                      >
+                        <p
+                          className="c7"
+                        >
+                          Private
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div
-                    className="c3"
-                  >
-                    <p
-                      className="c5"
-                    >
-                      Private
-                    </p>
-                  </div>
                 </div>
-              </div>
-            </div>
-            <div
-              className=""
-            >
-              <div
-                className="c3"
-              >
                 <div
-                  className="c10"
+                  className=""
                 >
                   <div
-                    className="c3"
+                    className="c5"
                   >
                     <div
                       className="c11"
                     >
-                      <svg
-                        className=""
-                        height="13"
-                        style={
-                          Object {
-                            "transform": "rotate(0deg)",
-                          }
-                        }
-                        viewBox="0 0 9 13"
-                        width="9"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        className="c5"
                       >
-                        <path
-                          d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
-                          fill="rgba(73, 73, 73, 1)"
-                          fillRule="evenodd"
-                        />
-                      </svg>
+                        <div
+                          className="c12"
+                        >
+                          <svg
+                            className=""
+                            height="13"
+                            style={
+                              Object {
+                                "transform": "rotate(0deg)",
+                              }
+                            }
+                            viewBox="0 0 9 13"
+                            width="9"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
+                              fill="rgba(73, 73, 73, 1)"
+                              fillRule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        className="c5"
+                      >
+                        <p
+                          className="c7"
+                        >
+                          Data center network
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div
-                    className="c3"
-                  >
-                    <p
-                      className="c5"
-                    >
-                      Data center network
-                    </p>
-                  </div>
                 </div>
               </div>
             </div>
@@ -2846,36 +3125,36 @@ exports[`renders <Network {...network} /> without throwing 4`] = `
 `;
 
 exports[`renders <Network {...network} fabric /> without throwing 1`] = `
-.c0 {
+.c2 {
   margin-bottom: 2rem;
 }
 
-.c16 {
+.c18 {
   margin-right: 2rem;
 }
 
-.c19 {
+.c21 {
   margin-right: 0.25rem;
 }
 
-.c13 {
+.c15 {
   margin-bottom: 1rem;
 }
 
-.c20 {
+.c22 {
   margin-top: 1rem;
 }
 
-.c12 {
+.c14 {
   padding: 2rem;
 }
 
-.c24 {
+.c26 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c15 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2895,7 +3174,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c18 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2919,7 +3198,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   align-items: center;
 }
 
-.c17 {
+.c19 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -2935,27 +3214,55 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   flex-shrink: 1;
 }
 
-.c14 {
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c16 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c14 + p,
-.c14 + small,
-.c14 + h1,
-.c14 + h2,
-.c14 + label,
-.c14 + h3,
-.c14 + h4,
-.c14 + h5,
-.c14 + div,
-.c14 + span {
+.c16 + p,
+.c16 + small,
+.c16 + h1,
+.c16 + h2,
+.c16 + label,
+.c16 + h3,
+.c16 + h4,
+.c16 + h5,
+.c16 + div,
+.c16 + span {
   padding-bottom: 2.25rem;
 }
 
-.c10 {
+.c12 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -2963,20 +3270,20 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   margin: 0;
 }
 
-.c10 + p,
-.c10 + small,
-.c10 + h1,
-.c10 + h2,
-.c10 + label,
-.c10 + h3,
-.c10 + h4,
-.c10 + h5,
-.c10 + div,
-.c10 + span {
+.c12 + p,
+.c12 + small,
+.c12 + h1,
+.c12 + h2,
+.c12 + label,
+.c12 + h3,
+.c12 + h4,
+.c12 + h5,
+.c12 + div,
+.c12 + span {
   margin-top: 0.75rem;
 }
 
-.c1 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2999,7 +3306,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c21 {
+.c23 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3027,7 +3334,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c11 {
+.c13 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3063,15 +3370,15 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c11 > [name='card']:not(:last-child) {
+.c13 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c11 > [name='card']:last-child {
+.c13 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3106,12 +3413,12 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c2 button {
+.c4 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c22 {
+.c24 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3149,12 +3456,12 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c22 button {
+.c24 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c3 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3207,7 +3514,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c9 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3265,7 +3572,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   color: inherit;
 }
 
-.c23 {
+.c25 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3324,7 +3631,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3333,59 +3640,59 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   display: none;
 }
 
-.c7[type='checkbox'],
-.c7[type='radio'] {
+.c9[type='checkbox'],
+.c9[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c7[type='number']::-webkit-inner-spin-button,
-.c7[type='number']::-webkit-outer-spin-button {
+.c9[type='number']::-webkit-inner-spin-button,
+.c9[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c7[type='search'] {
+.c9[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c7[type='search']::-webkit-search-cancel-button,
-.c7[type='search']::-webkit-search-decoration {
+.c9[type='search']::-webkit-search-cancel-button,
+.c9[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c7::-webkit-file-upload-button {
+.c9::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c7:checked + label::after {
+.c9:checked + label::after {
   opacity: 1;
 }
 
-.c7:selected + label::after {
+.c9:selected + label::after {
   opacity: 1;
 }
 
-.c7:checked + label {
+.c9:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:selected + label {
+.c9:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:disabled + label {
+.c9:disabled + label {
   background-color: rgb(249,249,249);
 }
 
-.c8 {
+.c10 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -3403,7 +3710,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c8::after {
+.c10::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -3420,7 +3727,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c6 {
+.c8 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -3429,7 +3736,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c5 {
+.c7 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3441,11 +3748,11 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   align-items: center;
 }
 
-.c5 label {
+.c7 label {
   font-weight: 400;
 }
 
-.c4 {
+.c6 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -3460,89 +3767,109 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
   className="c0"
 >
   <div
     className="c1"
-    disabled={false}
-    name="card"
   >
     <div
       className="c2"
-      disabled={false}
-      name="card-header"
     >
       <div
         className="c3"
         disabled={false}
-        name="card-header-box"
+        name="card"
       >
         <div
           className="c4"
-          name="1"
-          role="group"
-          style={undefined}
+          disabled={false}
+          name="card-header"
         >
-          <li
+          <div
             className="c5"
+            disabled={false}
+            name="card-header-box"
           >
             <div
-              checked={false}
               className="c6"
-              disabled={false}
-              id="bh"
-              type="checkbox"
+              name="1"
+              role="group"
+              style={undefined}
             >
-              <input
-                checked={false}
+              <li
                 className="c7"
-                disabled={false}
-                id="bi"
-                type="checkbox"
-              />
-              <label
-                className="c8"
-                htmlFor="bi"
-              />
+              >
+                <div
+                  checked={false}
+                  className="c8"
+                  disabled={false}
+                  id="bh"
+                  type="checkbox"
+                >
+                  <input
+                    checked={false}
+                    className="c9"
+                    disabled={false}
+                    id="bi"
+                    type="checkbox"
+                  />
+                  <label
+                    className="c10"
+                    htmlFor="bi"
+                  />
+                </div>
+              </li>
             </div>
-          </li>
+          </div>
+          <div
+            className="c11"
+            disabled={false}
+            name="card-header-meta"
+          >
+            <h4
+              className="c12"
+            >
+              name
+            </h4>
+          </div>
         </div>
-      </div>
-      <div
-        className="c9"
-        disabled={false}
-        name="card-header-meta"
-      >
-        <h4
-          className="c10"
-        >
-          name
-        </h4>
-      </div>
-    </div>
-    <div
-      className="c11"
-      name="card-outlet"
-    >
-      <div
-        className="c12"
-      >
         <div
           className="c13"
+          name="card-outlet"
         >
-          <p
+          <div
             className="c14"
           >
-            description
-          </p>
-        </div>
-        <div
-          className="c15"
-        >
-          <div
-            className="c16"
-          >
+            <div
+              className="c15"
+            >
+              <p
+                className="c16"
+              >
+                description
+              </p>
+            </div>
             <div
               className="c17"
             >
@@ -3550,144 +3877,152 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
                 className="c18"
               >
                 <div
-                  className="c17"
+                  className="c19"
                 >
                   <div
-                    className="c19"
+                    className="c20"
                   >
-                    <svg
-                      className=""
-                      height="16"
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 12 16"
-                      width="12"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      className="c19"
                     >
-                      <path
-                        d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                        fill="rgba(73, 73, 73, 1)"
-                      />
-                    </svg>
+                      <div
+                        className="c21"
+                      >
+                        <svg
+                          className=""
+                          height="16"
+                          style={
+                            Object {
+                              "transform": "rotate(0deg)",
+                            }
+                          }
+                          viewBox="0 0 12 16"
+                          width="12"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                            fill="rgba(73, 73, 73, 1)"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      className="c19"
+                    >
+                      <p
+                        className="c16"
+                      >
+                        Private
+                      </p>
+                    </div>
                   </div>
                 </div>
-                <div
-                  className="c17"
-                >
-                  <p
-                    className="c14"
-                  >
-                    Private
-                  </p>
-                </div>
               </div>
-            </div>
-          </div>
-          <div
-            className="c16"
-          >
-            <div
-              className="c17"
-            >
               <div
                 className="c18"
               >
                 <div
-                  className="c17"
+                  className="c19"
                 >
                   <div
-                    className="c19"
+                    className="c20"
                   >
-                    <svg
-                      className=""
-                      height="17"
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      version="1.1"
-                      viewBox="0 0 16.2 16.2"
-                      width="17"
-                      xmlns="http://www.w3.org/2000/svg"
-                      xmlnsXlink="http://www.w3.org/1999/xlink"
+                    <div
+                      className="c19"
                     >
-                      <path
-                        d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
-                        fill="rgba(73, 73, 73, 1)"
-                      />
-                    </svg>
+                      <div
+                        className="c21"
+                      >
+                        <svg
+                          className=""
+                          height="17"
+                          style={
+                            Object {
+                              "transform": "rotate(0deg)",
+                            }
+                          }
+                          version="1.1"
+                          viewBox="0 0 16.2 16.2"
+                          width="17"
+                          xmlns="http://www.w3.org/2000/svg"
+                          xmlnsXlink="http://www.w3.org/1999/xlink"
+                        >
+                          <path
+                            d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
+                            fill="rgba(73, 73, 73, 1)"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      className="c19"
+                    >
+                      <p
+                        className="c16"
+                      >
+                        Fabric
+                      </p>
+                    </div>
                   </div>
                 </div>
-                <div
-                  className="c17"
-                >
-                  <p
-                    className="c14"
-                  >
-                    Fabric
-                  </p>
-                </div>
               </div>
             </div>
-          </div>
-        </div>
-        <div
-          className="c20"
-        >
-          <div
-            className="c21"
-            disabled={false}
-            name="card"
-          >
             <div
               className="c22"
-              disabled={false}
-              name="card-header"
-              onClick={undefined}
             >
               <div
                 className="c23"
                 disabled={false}
-                name="card-header-meta"
+                name="card"
               >
                 <div
                   className="c24"
+                  disabled={false}
+                  name="card-header"
+                  onClick={undefined}
                 >
-                  <p
-                    className="c14"
+                  <div
+                    className="c25"
+                    disabled={false}
+                    name="card-header-meta"
                   >
-                    Network information
-                  </p>
+                    <div
+                      className="c26"
+                    >
+                      <p
+                        className="c16"
+                      >
+                        Network information
+                      </p>
+                    </div>
+                  </div>
+                  <div
+                    className="c5"
+                    disabled={false}
+                    name="card-header-box"
+                  >
+                    <svg
+                      className=""
+                      height="6"
+                      style={
+                        Object {
+                          "transform": "rotate(0deg)",
+                        }
+                      }
+                      viewBox="0 0 9 6"
+                      width="9"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
+                        fill="rgba(73, 73, 73, 1)"
+                        fillRule="evenodd"
+                      />
+                    </svg>
+                  </div>
                 </div>
               </div>
-              <div
-                className="c3"
-                disabled={false}
-                name="card-header-box"
-              >
-                <svg
-                  className=""
-                  height="6"
-                  style={
-                    Object {
-                      "transform": "rotate(0deg)",
-                    }
-                  }
-                  viewBox="0 0 9 6"
-                  width="9"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
-                    fill="rgba(73, 73, 73, 1)"
-                    fillRule="evenodd"
-                  />
-                </svg>
-              </div>
             </div>
           </div>
         </div>
@@ -3698,28 +4033,28 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
 `;
 
 exports[`renders <Network {...network} fabric /> without throwing 2`] = `
-.c9 {
+.c10 {
   margin-right: 2rem;
 }
 
-.c11 {
+.c12 {
   margin-right: 0.25rem;
 }
 
-.c0 {
+.c2 {
   display: inline-block;
   margin-top: 1rem;
   margin-right: 1rem;
 }
 
-.c4 {
+.c6 {
   margin-top: 0.5rem;
   margin-right: 1rem;
   margin-bottom: 0.5rem;
   margin-left: 1rem;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3739,7 +4074,7 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
   align-content: stretch;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3763,7 +4098,7 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
   align-items: center;
 }
 
-.c2 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3786,7 +4121,7 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
   flex-direction: column;
 }
 
-.c3 {
+.c5 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3802,27 +4137,7 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
   flex-shrink: 1;
 }
 
-.c5 {
-  color: rgba(73,73,73,1);
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
-  padding-bottom: 2.25rem;
-}
-
-.c7 {
+.c0 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3841,13 +4156,42 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
   margin-left: -0.5rem;
 }
 
-.c6 {
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c7 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c8 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c1 {
+.c3 {
   display: inline-block;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -3855,6 +4199,26 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
   min-width: 18.75rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
   className="c0"
 >
@@ -3870,121 +4234,129 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
         <div
           className="c4"
         >
-          <p
+          <div
             className="c5"
           >
-            name
-          </p>
-        </div>
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c6 c7"
-          height="0.0625rem"
-        />
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
+            <div
+              className="c6"
+            >
+              <p
+                className="c7"
+              >
+                name
+              </p>
+            </div>
+          </div>
           <div
-            className="c8"
+            className="c5"
           >
             <div
-              className="c9"
+              className="c8 c0"
+              height="0.0625rem"
+            />
+          </div>
+          <div
+            className="c5"
+          >
+            <div
+              className="c6"
             >
               <div
-                className="c3"
+                className="c9"
               >
                 <div
                   className="c10"
                 >
                   <div
-                    className="c3"
+                    className="c5"
                   >
                     <div
                       className="c11"
                     >
-                      <svg
-                        className=""
-                        height="16"
-                        style={
-                          Object {
-                            "transform": "rotate(0deg)",
-                          }
-                        }
-                        viewBox="0 0 12 16"
-                        width="12"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        className="c5"
                       >
-                        <path
-                          d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                          fill="rgba(73, 73, 73, 1)"
-                        />
-                      </svg>
+                        <div
+                          className="c12"
+                        >
+                          <svg
+                            className=""
+                            height="16"
+                            style={
+                              Object {
+                                "transform": "rotate(0deg)",
+                              }
+                            }
+                            viewBox="0 0 12 16"
+                            width="12"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                              fill="rgba(73, 73, 73, 1)"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        className="c5"
+                      >
+                        <p
+                          className="c7"
+                        >
+                          Private
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div
-                    className="c3"
-                  >
-                    <p
-                      className="c5"
-                    >
-                      Private
-                    </p>
-                  </div>
                 </div>
-              </div>
-            </div>
-            <div
-              className=""
-            >
-              <div
-                className="c3"
-              >
                 <div
-                  className="c10"
+                  className=""
                 >
                   <div
-                    className="c3"
+                    className="c5"
                   >
                     <div
                       className="c11"
                     >
-                      <svg
-                        className=""
-                        height="17"
-                        style={
-                          Object {
-                            "transform": "rotate(0deg)",
-                          }
-                        }
-                        version="1.1"
-                        viewBox="0 0 16.2 16.2"
-                        width="17"
-                        xmlns="http://www.w3.org/2000/svg"
-                        xmlnsXlink="http://www.w3.org/1999/xlink"
+                      <div
+                        className="c5"
                       >
-                        <path
-                          d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
-                          fill="rgba(73, 73, 73, 1)"
-                        />
-                      </svg>
+                        <div
+                          className="c12"
+                        >
+                          <svg
+                            className=""
+                            height="17"
+                            style={
+                              Object {
+                                "transform": "rotate(0deg)",
+                              }
+                            }
+                            version="1.1"
+                            viewBox="0 0 16.2 16.2"
+                            width="17"
+                            xmlns="http://www.w3.org/2000/svg"
+                            xmlnsXlink="http://www.w3.org/1999/xlink"
+                          >
+                            <path
+                              d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
+                              fill="rgba(73, 73, 73, 1)"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        className="c5"
+                      >
+                        <p
+                          className="c7"
+                        >
+                          Fabric
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div
-                    className="c3"
-                  >
-                    <p
-                      className="c5"
-                    >
-                      Fabric
-                    </p>
-                  </div>
                 </div>
               </div>
             </div>
@@ -3997,40 +4369,40 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
 `;
 
 exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
-.c0 {
+.c2 {
   margin-bottom: 2rem;
 }
 
-.c16 {
+.c18 {
   margin-right: 2rem;
 }
 
-.c19 {
+.c21 {
   margin-right: 0.25rem;
 }
 
-.c13 {
+.c15 {
   margin-bottom: 1rem;
 }
 
-.c20 {
+.c22 {
   margin-top: 1rem;
 }
 
-.c12 {
+.c14 {
   padding: 2rem;
 }
 
-.c22 {
+.c24 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c23 {
+.c25 {
   padding: 1rem;
 }
 
-.c15 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4050,7 +4422,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c18 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4074,7 +4446,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   align-items: center;
 }
 
-.c24 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4097,7 +4469,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c17 {
+.c19 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4113,27 +4485,55 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   flex-shrink: 1;
 }
 
-.c14 {
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c16 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c14 + p,
-.c14 + small,
-.c14 + h1,
-.c14 + h2,
-.c14 + label,
-.c14 + h3,
-.c14 + h4,
-.c14 + h5,
-.c14 + div,
-.c14 + span {
+.c16 + p,
+.c16 + small,
+.c16 + h1,
+.c16 + h2,
+.c16 + label,
+.c16 + h3,
+.c16 + h4,
+.c16 + h5,
+.c16 + div,
+.c16 + span {
   padding-bottom: 2.25rem;
 }
 
-.c10 {
+.c12 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -4141,20 +4541,20 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   margin: 0;
 }
 
-.c10 + p,
-.c10 + small,
-.c10 + h1,
-.c10 + h2,
-.c10 + label,
-.c10 + h3,
-.c10 + h4,
-.c10 + h5,
-.c10 + div,
-.c10 + span {
+.c12 + p,
+.c12 + small,
+.c12 + h1,
+.c12 + h2,
+.c12 + label,
+.c12 + h3,
+.c12 + h4,
+.c12 + h5,
+.c12 + div,
+.c12 + span {
   margin-top: 0.75rem;
 }
 
-.c1 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4177,7 +4577,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c21 {
+.c23 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4199,7 +4599,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c11 {
+.c13 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4235,15 +4635,15 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c11 > [name='card']:not(:last-child) {
+.c13 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c11 > [name='card']:last-child {
+.c13 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4278,12 +4678,12 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c2 button {
+.c4 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c3 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4336,7 +4736,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c9 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4394,7 +4794,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4403,59 +4803,59 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   display: none;
 }
 
-.c7[type='checkbox'],
-.c7[type='radio'] {
+.c9[type='checkbox'],
+.c9[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c7[type='number']::-webkit-inner-spin-button,
-.c7[type='number']::-webkit-outer-spin-button {
+.c9[type='number']::-webkit-inner-spin-button,
+.c9[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c7[type='search'] {
+.c9[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c7[type='search']::-webkit-search-cancel-button,
-.c7[type='search']::-webkit-search-decoration {
+.c9[type='search']::-webkit-search-cancel-button,
+.c9[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c7::-webkit-file-upload-button {
+.c9::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c7:checked + label::after {
+.c9:checked + label::after {
   opacity: 1;
 }
 
-.c7:selected + label::after {
+.c9:selected + label::after {
   opacity: 1;
 }
 
-.c7:checked + label {
+.c9:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:selected + label {
+.c9:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:disabled + label {
+.c9:disabled + label {
   background-color: rgb(249,249,249);
 }
 
-.c8 {
+.c10 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -4473,7 +4873,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c8::after {
+.c10::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -4490,7 +4890,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c6 {
+.c8 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -4499,7 +4899,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c5 {
+.c7 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4511,11 +4911,11 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   align-items: center;
 }
 
-.c5 label {
+.c7 label {
   font-weight: 400;
 }
 
-.c4 {
+.c6 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -4530,7 +4930,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c26 {
+.c28 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4553,45 +4953,45 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   outline: 0;
 }
 
-.c26::-webkit-input-placeholder {
+.c28::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26::-moz-placeholder {
+.c28::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:-ms-input-placeholder {
+.c28:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:invalid {
+.c28:invalid {
   box-shadow: none;
 }
 
-.c26:disabled {
+.c28:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c26:disabled::-webkit-input-placeholder {
+.c28:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:disabled::-moz-placeholder {
+.c28:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:disabled:-ms-input-placeholder {
+.c28:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:focus {
+.c28:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c25 {
+.c27 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4604,89 +5004,109 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
   className="c0"
 >
   <div
     className="c1"
-    disabled={false}
-    name="card"
   >
     <div
       className="c2"
-      disabled={false}
-      name="card-header"
     >
       <div
         className="c3"
         disabled={false}
-        name="card-header-box"
+        name="card"
       >
         <div
           className="c4"
-          name="1"
-          role="group"
-          style={undefined}
+          disabled={false}
+          name="card-header"
         >
-          <li
+          <div
             className="c5"
+            disabled={false}
+            name="card-header-box"
           >
             <div
-              checked={false}
               className="c6"
-              disabled={false}
-              id="bj"
-              type="checkbox"
+              name="1"
+              role="group"
+              style={undefined}
             >
-              <input
-                checked={false}
+              <li
                 className="c7"
-                disabled={false}
-                id="bk"
-                type="checkbox"
-              />
-              <label
-                className="c8"
-                htmlFor="bk"
-              />
+              >
+                <div
+                  checked={false}
+                  className="c8"
+                  disabled={false}
+                  id="bj"
+                  type="checkbox"
+                >
+                  <input
+                    checked={false}
+                    className="c9"
+                    disabled={false}
+                    id="bk"
+                    type="checkbox"
+                  />
+                  <label
+                    className="c10"
+                    htmlFor="bk"
+                  />
+                </div>
+              </li>
             </div>
-          </li>
+          </div>
+          <div
+            className="c11"
+            disabled={false}
+            name="card-header-meta"
+          >
+            <h4
+              className="c12"
+            >
+              name
+            </h4>
+          </div>
         </div>
-      </div>
-      <div
-        className="c9"
-        disabled={false}
-        name="card-header-meta"
-      >
-        <h4
-          className="c10"
-        >
-          name
-        </h4>
-      </div>
-    </div>
-    <div
-      className="c11"
-      name="card-outlet"
-    >
-      <div
-        className="c12"
-      >
         <div
           className="c13"
+          name="card-outlet"
         >
-          <p
+          <div
             className="c14"
           >
-            description
-          </p>
-        </div>
-        <div
-          className="c15"
-        >
-          <div
-            className="c16"
-          >
+            <div
+              className="c15"
+            >
+              <p
+                className="c16"
+              >
+                description
+              </p>
+            </div>
             <div
               className="c17"
             >
@@ -4694,222 +5114,230 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                 className="c18"
               >
                 <div
-                  className="c17"
+                  className="c19"
                 >
                   <div
-                    className="c19"
+                    className="c20"
                   >
-                    <svg
-                      className=""
-                      height="16"
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 12 16"
-                      width="12"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      className="c19"
                     >
-                      <path
-                        d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                        fill="rgba(73, 73, 73, 1)"
-                      />
-                    </svg>
+                      <div
+                        className="c21"
+                      >
+                        <svg
+                          className=""
+                          height="16"
+                          style={
+                            Object {
+                              "transform": "rotate(0deg)",
+                            }
+                          }
+                          viewBox="0 0 12 16"
+                          width="12"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                            fill="rgba(73, 73, 73, 1)"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      className="c19"
+                    >
+                      <p
+                        className="c16"
+                      >
+                        Private
+                      </p>
+                    </div>
                   </div>
                 </div>
-                <div
-                  className="c17"
-                >
-                  <p
-                    className="c14"
-                  >
-                    Private
-                  </p>
-                </div>
               </div>
-            </div>
-          </div>
-          <div
-            className="c16"
-          >
-            <div
-              className="c17"
-            >
               <div
                 className="c18"
               >
                 <div
-                  className="c17"
+                  className="c19"
                 >
                   <div
-                    className="c19"
+                    className="c20"
                   >
-                    <svg
-                      className=""
-                      height="17"
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      version="1.1"
-                      viewBox="0 0 16.2 16.2"
-                      width="17"
-                      xmlns="http://www.w3.org/2000/svg"
-                      xmlnsXlink="http://www.w3.org/1999/xlink"
+                    <div
+                      className="c19"
                     >
-                      <path
-                        d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
-                        fill="rgba(73, 73, 73, 1)"
-                      />
-                    </svg>
+                      <div
+                        className="c21"
+                      >
+                        <svg
+                          className=""
+                          height="17"
+                          style={
+                            Object {
+                              "transform": "rotate(0deg)",
+                            }
+                          }
+                          version="1.1"
+                          viewBox="0 0 16.2 16.2"
+                          width="17"
+                          xmlns="http://www.w3.org/2000/svg"
+                          xmlnsXlink="http://www.w3.org/1999/xlink"
+                        >
+                          <path
+                            d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
+                            fill="rgba(73, 73, 73, 1)"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      className="c19"
+                    >
+                      <p
+                        className="c16"
+                      >
+                        Fabric
+                      </p>
+                    </div>
                   </div>
                 </div>
-                <div
-                  className="c17"
-                >
-                  <p
-                    className="c14"
-                  >
-                    Fabric
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="c20"
-        >
-          <div
-            className="c21"
-            disabled={false}
-            name="card"
-          >
-            <div
-              className="c2"
-              disabled={false}
-              name="card-header"
-              onClick={undefined}
-            >
-              <div
-                className="c9"
-                disabled={false}
-                name="card-header-meta"
-              >
-                <div
-                  className="c22"
-                >
-                  <p
-                    className="c14"
-                  >
-                    Network information
-                  </p>
-                </div>
-              </div>
-              <div
-                className="c3"
-                disabled={false}
-                name="card-header-box"
-              >
-                <svg
-                  className=""
-                  height="6"
-                  style={
-                    Object {
-                      "transform": "rotate(180deg)",
-                    }
-                  }
-                  viewBox="0 0 9 6"
-                  width="9"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
-                    fill="rgba(73, 73, 73, 1)"
-                    fillRule="evenodd"
-                  />
-                </svg>
               </div>
             </div>
             <div
-              className="c11"
-              name="card-outlet"
+              className="c22"
             >
               <div
                 className="c23"
+                disabled={false}
+                name="card"
               >
                 <div
-                  className="c24"
+                  className="c4"
+                  disabled={false}
+                  name="card-header"
+                  onClick={undefined}
                 >
                   <div
-                    className="c17"
+                    className="c11"
+                    disabled={false}
+                    name="card-header-meta"
                   >
                     <div
-                      className="c4"
-                      name="id"
-                      role="group"
-                      style={undefined}
+                      className="c24"
                     >
-                      <label
-                        className="c25"
-                        htmlFor="bl"
+                      <p
+                        className="c16"
                       >
-                        ID
-                      </label>
-                      <input
-                        className="c26"
-                        disabled={false}
-                        id="bl"
-                        value="1"
-                      />
+                        Network information
+                      </p>
                     </div>
                   </div>
                   <div
-                    className="c17"
+                    className="c5"
+                    disabled={false}
+                    name="card-header-box"
                   >
-                    <div
-                      className="c4"
-                      name="subnet"
-                      role="group"
-                      style={undefined}
+                    <svg
+                      className=""
+                      height="6"
+                      style={
+                        Object {
+                          "transform": "rotate(180deg)",
+                        }
+                      }
+                      viewBox="0 0 9 6"
+                      width="9"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <label
-                        className="c25"
-                        htmlFor="bm"
-                      >
-                        Subnet
-                      </label>
-                      <input
-                        className="c26"
-                        disabled={false}
-                        id="bm"
-                        value="255.255.255.0"
+                      <path
+                        d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
+                        fill="rgba(73, 73, 73, 1)"
+                        fillRule="evenodd"
                       />
-                    </div>
+                    </svg>
                   </div>
+                </div>
+                <div
+                  className="c13"
+                  name="card-outlet"
+                >
                   <div
-                    className="c17"
+                    className="c25"
                   >
                     <div
-                      className="c4"
-                      name="ip-range"
-                      role="group"
-                      style={undefined}
+                      className="c26"
                     >
-                      <label
-                        className="c25"
-                        htmlFor="bn"
+                      <div
+                        className="c19"
                       >
-                        IP range
-                      </label>
-                      <input
-                        className="c26"
-                        disabled={false}
-                        id="bn"
-                        value="192.168.1.2 - 192.168.1.253"
-                      />
+                        <div
+                          className="c6"
+                          name="id"
+                          role="group"
+                          style={undefined}
+                        >
+                          <label
+                            className="c27"
+                            htmlFor="bl"
+                          >
+                            ID
+                          </label>
+                          <input
+                            className="c28"
+                            disabled={false}
+                            id="bl"
+                            value="1"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        className="c19"
+                      >
+                        <div
+                          className="c6"
+                          name="subnet"
+                          role="group"
+                          style={undefined}
+                        >
+                          <label
+                            className="c27"
+                            htmlFor="bm"
+                          >
+                            Subnet
+                          </label>
+                          <input
+                            className="c28"
+                            disabled={false}
+                            id="bm"
+                            value="255.255.255.0"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        className="c19"
+                      >
+                        <div
+                          className="c6"
+                          name="ip-range"
+                          role="group"
+                          style={undefined}
+                        >
+                          <label
+                            className="c27"
+                            htmlFor="bn"
+                          >
+                            IP range
+                          </label>
+                          <input
+                            className="c28"
+                            disabled={false}
+                            id="bn"
+                            value="192.168.1.2 - 192.168.1.253"
+                          />
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -4924,28 +5352,28 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
 `;
 
 exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
-.c9 {
+.c10 {
   margin-right: 2rem;
 }
 
-.c11 {
+.c12 {
   margin-right: 0.25rem;
 }
 
-.c0 {
+.c2 {
   display: inline-block;
   margin-top: 1rem;
   margin-right: 1rem;
 }
 
-.c4 {
+.c6 {
   margin-top: 0.5rem;
   margin-right: 1rem;
   margin-bottom: 0.5rem;
   margin-left: 1rem;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4965,7 +5393,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
   align-content: stretch;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4989,7 +5417,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
   align-items: center;
 }
 
-.c2 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5012,7 +5440,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
   flex-direction: column;
 }
 
-.c3 {
+.c5 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5028,27 +5456,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
   flex-shrink: 1;
 }
 
-.c5 {
-  color: rgba(73,73,73,1);
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
-  padding-bottom: 2.25rem;
-}
-
-.c7 {
+.c0 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5067,13 +5475,42 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
   margin-left: -0.5rem;
 }
 
-.c6 {
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c7 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c8 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c1 {
+.c3 {
   display: inline-block;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -5081,6 +5518,26 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
   min-width: 18.75rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
   className="c0"
 >
@@ -5096,121 +5553,129 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
         <div
           className="c4"
         >
-          <p
+          <div
             className="c5"
           >
-            name
-          </p>
-        </div>
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c6 c7"
-          height="0.0625rem"
-        />
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
+            <div
+              className="c6"
+            >
+              <p
+                className="c7"
+              >
+                name
+              </p>
+            </div>
+          </div>
           <div
-            className="c8"
+            className="c5"
           >
             <div
-              className="c9"
+              className="c8 c0"
+              height="0.0625rem"
+            />
+          </div>
+          <div
+            className="c5"
+          >
+            <div
+              className="c6"
             >
               <div
-                className="c3"
+                className="c9"
               >
                 <div
                   className="c10"
                 >
                   <div
-                    className="c3"
+                    className="c5"
                   >
                     <div
                       className="c11"
                     >
-                      <svg
-                        className=""
-                        height="16"
-                        style={
-                          Object {
-                            "transform": "rotate(0deg)",
-                          }
-                        }
-                        viewBox="0 0 12 16"
-                        width="12"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        className="c5"
                       >
-                        <path
-                          d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                          fill="rgba(73, 73, 73, 1)"
-                        />
-                      </svg>
+                        <div
+                          className="c12"
+                        >
+                          <svg
+                            className=""
+                            height="16"
+                            style={
+                              Object {
+                                "transform": "rotate(0deg)",
+                              }
+                            }
+                            viewBox="0 0 12 16"
+                            width="12"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                              fill="rgba(73, 73, 73, 1)"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        className="c5"
+                      >
+                        <p
+                          className="c7"
+                        >
+                          Private
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div
-                    className="c3"
-                  >
-                    <p
-                      className="c5"
-                    >
-                      Private
-                    </p>
-                  </div>
                 </div>
-              </div>
-            </div>
-            <div
-              className=""
-            >
-              <div
-                className="c3"
-              >
                 <div
-                  className="c10"
+                  className=""
                 >
                   <div
-                    className="c3"
+                    className="c5"
                   >
                     <div
                       className="c11"
                     >
-                      <svg
-                        className=""
-                        height="17"
-                        style={
-                          Object {
-                            "transform": "rotate(0deg)",
-                          }
-                        }
-                        version="1.1"
-                        viewBox="0 0 16.2 16.2"
-                        width="17"
-                        xmlns="http://www.w3.org/2000/svg"
-                        xmlnsXlink="http://www.w3.org/1999/xlink"
+                      <div
+                        className="c5"
                       >
-                        <path
-                          d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
-                          fill="rgba(73, 73, 73, 1)"
-                        />
-                      </svg>
+                        <div
+                          className="c12"
+                        >
+                          <svg
+                            className=""
+                            height="17"
+                            style={
+                              Object {
+                                "transform": "rotate(0deg)",
+                              }
+                            }
+                            version="1.1"
+                            viewBox="0 0 16.2 16.2"
+                            width="17"
+                            xmlns="http://www.w3.org/2000/svg"
+                            xmlnsXlink="http://www.w3.org/1999/xlink"
+                          >
+                            <path
+                              d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
+                              fill="rgba(73, 73, 73, 1)"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        className="c5"
+                      >
+                        <p
+                          className="c7"
+                        >
+                          Fabric
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div
-                    className="c3"
-                  >
-                    <p
-                      className="c5"
-                    >
-                      Fabric
-                    </p>
-                  </div>
                 </div>
               </div>
             </div>
@@ -5223,27 +5688,27 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
 `;
 
 exports[`renders <Network {...network} public /> without throwing 1`] = `
-.c0 {
+.c2 {
   margin-bottom: 2rem;
 }
 
-.c16 {
+.c18 {
   margin-right: 2rem;
 }
 
-.c19 {
+.c21 {
   margin-right: 0.25rem;
 }
 
-.c13 {
+.c15 {
   margin-bottom: 1rem;
 }
 
-.c12 {
+.c14 {
   padding: 2rem;
 }
 
-.c15 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5263,7 +5728,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c18 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5287,7 +5752,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   align-items: center;
 }
 
-.c17 {
+.c19 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5303,27 +5768,55 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   flex-shrink: 1;
 }
 
-.c14 {
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c16 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c14 + p,
-.c14 + small,
-.c14 + h1,
-.c14 + h2,
-.c14 + label,
-.c14 + h3,
-.c14 + h4,
-.c14 + h5,
-.c14 + div,
-.c14 + span {
+.c16 + p,
+.c16 + small,
+.c16 + h1,
+.c16 + h2,
+.c16 + label,
+.c16 + h3,
+.c16 + h4,
+.c16 + h5,
+.c16 + div,
+.c16 + span {
   padding-bottom: 2.25rem;
 }
 
-.c10 {
+.c12 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -5331,20 +5824,20 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   margin: 0;
 }
 
-.c10 + p,
-.c10 + small,
-.c10 + h1,
-.c10 + h2,
-.c10 + label,
-.c10 + h3,
-.c10 + h4,
-.c10 + h5,
-.c10 + div,
-.c10 + span {
+.c12 + p,
+.c12 + small,
+.c12 + h1,
+.c12 + h2,
+.c12 + label,
+.c12 + h3,
+.c12 + h4,
+.c12 + h5,
+.c12 + div,
+.c12 + span {
   margin-top: 0.75rem;
 }
 
-.c1 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5367,7 +5860,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c11 {
+.c13 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5403,15 +5896,15 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c11 > [name='card']:not(:last-child) {
+.c13 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c11 > [name='card']:last-child {
+.c13 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5446,12 +5939,12 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c2 button {
+.c4 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c3 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5504,7 +5997,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c9 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5562,7 +6055,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -5571,59 +6064,59 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   display: none;
 }
 
-.c7[type='checkbox'],
-.c7[type='radio'] {
+.c9[type='checkbox'],
+.c9[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c7[type='number']::-webkit-inner-spin-button,
-.c7[type='number']::-webkit-outer-spin-button {
+.c9[type='number']::-webkit-inner-spin-button,
+.c9[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c7[type='search'] {
+.c9[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c7[type='search']::-webkit-search-cancel-button,
-.c7[type='search']::-webkit-search-decoration {
+.c9[type='search']::-webkit-search-cancel-button,
+.c9[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c7::-webkit-file-upload-button {
+.c9::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c7:checked + label::after {
+.c9:checked + label::after {
   opacity: 1;
 }
 
-.c7:selected + label::after {
+.c9:selected + label::after {
   opacity: 1;
 }
 
-.c7:checked + label {
+.c9:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:selected + label {
+.c9:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:disabled + label {
+.c9:disabled + label {
   background-color: rgb(249,249,249);
 }
 
-.c8 {
+.c10 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -5641,7 +6134,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c8::after {
+.c10::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -5658,7 +6151,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c6 {
+.c8 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -5667,7 +6160,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c5 {
+.c7 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5679,11 +6172,11 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   align-items: center;
 }
 
-.c5 label {
+.c7 label {
   font-weight: 400;
 }
 
-.c4 {
+.c6 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -5698,136 +6191,109 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
   className="c0"
 >
   <div
     className="c1"
-    disabled={false}
-    name="card"
   >
     <div
       className="c2"
-      disabled={false}
-      name="card-header"
     >
       <div
         className="c3"
         disabled={false}
-        name="card-header-box"
+        name="card"
       >
         <div
           className="c4"
-          name="1"
-          role="group"
-          style={undefined}
-        >
-          <li
-            className="c5"
-          >
-            <div
-              checked={false}
-              className="c6"
-              disabled={false}
-              id="bf"
-              type="checkbox"
-            >
-              <input
-                checked={false}
-                className="c7"
-                disabled={false}
-                id="bg"
-                type="checkbox"
-              />
-              <label
-                className="c8"
-                htmlFor="bg"
-              />
-            </div>
-          </li>
-        </div>
-      </div>
-      <div
-        className="c9"
-        disabled={false}
-        name="card-header-meta"
-      >
-        <h4
-          className="c10"
-        >
-          name
-        </h4>
-      </div>
-    </div>
-    <div
-      className="c11"
-      name="card-outlet"
-    >
-      <div
-        className="c12"
-      >
-        <div
-          className="c13"
-        >
-          <p
-            className="c14"
-          >
-            description
-          </p>
-        </div>
-        <div
-          className="c15"
+          disabled={false}
+          name="card-header"
         >
           <div
-            className="c16"
+            className="c5"
+            disabled={false}
+            name="card-header-box"
           >
             <div
-              className="c17"
+              className="c6"
+              name="1"
+              role="group"
+              style={undefined}
             >
-              <div
-                className="c18"
+              <li
+                className="c7"
               >
                 <div
-                  className="c17"
+                  checked={false}
+                  className="c8"
+                  disabled={false}
+                  id="bf"
+                  type="checkbox"
                 >
-                  <div
-                    className="c19"
-                  >
-                    <svg
-                      className=""
-                      height="16"
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 12 16"
-                      width="12"
-                    >
-                      <g>
-                        <path
-                          d="M6 13a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1 1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm4-7V4a4 4 0 0 0-8 0h2c0-1.65.35-2 2-2s2 .35 2 2v2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"
-                          fill="rgba(73, 73, 73, 1)"
-                        />
-                      </g>
-                    </svg>
-                  </div>
+                  <input
+                    checked={false}
+                    className="c9"
+                    disabled={false}
+                    id="bg"
+                    type="checkbox"
+                  />
+                  <label
+                    className="c10"
+                    htmlFor="bg"
+                  />
                 </div>
-                <div
-                  className="c17"
-                >
-                  <p
-                    className="c14"
-                  >
-                    Public
-                  </p>
-                </div>
-              </div>
+              </li>
             </div>
           </div>
           <div
-            className="c16"
+            className="c11"
+            disabled={false}
+            name="card-header-meta"
           >
+            <h4
+              className="c12"
+            >
+              name
+            </h4>
+          </div>
+        </div>
+        <div
+          className="c13"
+          name="card-outlet"
+        >
+          <div
+            className="c14"
+          >
+            <div
+              className="c15"
+            >
+              <p
+                className="c16"
+              >
+                description
+              </p>
+            </div>
             <div
               className="c17"
             >
@@ -5835,39 +6301,94 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
                 className="c18"
               >
                 <div
-                  className="c17"
+                  className="c19"
                 >
                   <div
-                    className="c19"
+                    className="c20"
                   >
-                    <svg
-                      className=""
-                      height="13"
-                      style={
-                        Object {
-                          "transform": "rotate(0deg)",
-                        }
-                      }
-                      viewBox="0 0 9 13"
-                      width="9"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      className="c19"
                     >
-                      <path
-                        d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
-                        fill="rgba(73, 73, 73, 1)"
-                        fillRule="evenodd"
-                      />
-                    </svg>
+                      <div
+                        className="c21"
+                      >
+                        <svg
+                          className=""
+                          height="16"
+                          style={
+                            Object {
+                              "transform": "rotate(0deg)",
+                            }
+                          }
+                          viewBox="0 0 12 16"
+                          width="12"
+                        >
+                          <g>
+                            <path
+                              d="M6 13a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1 1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm4-7V4a4 4 0 0 0-8 0h2c0-1.65.35-2 2-2s2 .35 2 2v2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"
+                              fill="rgba(73, 73, 73, 1)"
+                            />
+                          </g>
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      className="c19"
+                    >
+                      <p
+                        className="c16"
+                      >
+                        Public
+                      </p>
+                    </div>
                   </div>
                 </div>
+              </div>
+              <div
+                className="c18"
+              >
                 <div
-                  className="c17"
+                  className="c19"
                 >
-                  <p
-                    className="c14"
+                  <div
+                    className="c20"
                   >
-                    Data center network
-                  </p>
+                    <div
+                      className="c19"
+                    >
+                      <div
+                        className="c21"
+                      >
+                        <svg
+                          className=""
+                          height="13"
+                          style={
+                            Object {
+                              "transform": "rotate(0deg)",
+                            }
+                          }
+                          viewBox="0 0 9 13"
+                          width="9"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
+                            fill="rgba(73, 73, 73, 1)"
+                            fillRule="evenodd"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div
+                      className="c19"
+                    >
+                      <p
+                        className="c16"
+                      >
+                        Data center network
+                      </p>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -5880,28 +6401,28 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
 `;
 
 exports[`renders <Network {...network} public /> without throwing 2`] = `
-.c9 {
+.c10 {
   margin-right: 2rem;
 }
 
-.c11 {
+.c12 {
   margin-right: 0.25rem;
 }
 
-.c0 {
+.c2 {
   display: inline-block;
   margin-top: 1rem;
   margin-right: 1rem;
 }
 
-.c4 {
+.c6 {
   margin-top: 0.5rem;
   margin-right: 1rem;
   margin-bottom: 0.5rem;
   margin-left: 1rem;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5921,7 +6442,7 @@ exports[`renders <Network {...network} public /> without throwing 2`] = `
   align-content: stretch;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5945,7 +6466,7 @@ exports[`renders <Network {...network} public /> without throwing 2`] = `
   align-items: center;
 }
 
-.c2 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5968,7 +6489,7 @@ exports[`renders <Network {...network} public /> without throwing 2`] = `
   flex-direction: column;
 }
 
-.c3 {
+.c5 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5984,27 +6505,7 @@ exports[`renders <Network {...network} public /> without throwing 2`] = `
   flex-shrink: 1;
 }
 
-.c5 {
-  color: rgba(73,73,73,1);
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
-  padding-bottom: 2.25rem;
-}
-
-.c7 {
+.c0 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6023,13 +6524,42 @@ exports[`renders <Network {...network} public /> without throwing 2`] = `
   margin-left: -0.5rem;
 }
 
-.c6 {
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c7 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c8 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c1 {
+.c3 {
   display: inline-block;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -6037,6 +6567,26 @@ exports[`renders <Network {...network} public /> without throwing 2`] = `
   min-width: 18.75rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
   className="c0"
 >
@@ -6052,121 +6602,129 @@ exports[`renders <Network {...network} public /> without throwing 2`] = `
         <div
           className="c4"
         >
-          <p
+          <div
             className="c5"
           >
-            name
-          </p>
-        </div>
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c6 c7"
-          height="0.0625rem"
-        />
-      </div>
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
+            <div
+              className="c6"
+            >
+              <p
+                className="c7"
+              >
+                name
+              </p>
+            </div>
+          </div>
           <div
-            className="c8"
+            className="c5"
           >
             <div
-              className="c9"
+              className="c8 c0"
+              height="0.0625rem"
+            />
+          </div>
+          <div
+            className="c5"
+          >
+            <div
+              className="c6"
             >
               <div
-                className="c3"
+                className="c9"
               >
                 <div
                   className="c10"
                 >
                   <div
-                    className="c3"
+                    className="c5"
                   >
                     <div
                       className="c11"
                     >
-                      <svg
-                        className=""
-                        height="16"
-                        style={
-                          Object {
-                            "transform": "rotate(0deg)",
-                          }
-                        }
-                        viewBox="0 0 12 16"
-                        width="12"
+                      <div
+                        className="c5"
                       >
-                        <g>
-                          <path
-                            d="M6 13a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1 1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm4-7V4a4 4 0 0 0-8 0h2c0-1.65.35-2 2-2s2 .35 2 2v2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"
-                            fill="rgba(73, 73, 73, 1)"
-                          />
-                        </g>
-                      </svg>
+                        <div
+                          className="c12"
+                        >
+                          <svg
+                            className=""
+                            height="16"
+                            style={
+                              Object {
+                                "transform": "rotate(0deg)",
+                              }
+                            }
+                            viewBox="0 0 12 16"
+                            width="12"
+                          >
+                            <g>
+                              <path
+                                d="M6 13a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1 1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm4-7V4a4 4 0 0 0-8 0h2c0-1.65.35-2 2-2s2 .35 2 2v2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"
+                                fill="rgba(73, 73, 73, 1)"
+                              />
+                            </g>
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        className="c5"
+                      >
+                        <p
+                          className="c7"
+                        >
+                          Public
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div
-                    className="c3"
-                  >
-                    <p
-                      className="c5"
-                    >
-                      Public
-                    </p>
-                  </div>
                 </div>
-              </div>
-            </div>
-            <div
-              className=""
-            >
-              <div
-                className="c3"
-              >
                 <div
-                  className="c10"
+                  className=""
                 >
                   <div
-                    className="c3"
+                    className="c5"
                   >
                     <div
                       className="c11"
                     >
-                      <svg
-                        className=""
-                        height="13"
-                        style={
-                          Object {
-                            "transform": "rotate(0deg)",
-                          }
-                        }
-                        viewBox="0 0 9 13"
-                        width="9"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        className="c5"
                       >
-                        <path
-                          d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
-                          fill="rgba(73, 73, 73, 1)"
-                          fillRule="evenodd"
-                        />
-                      </svg>
+                        <div
+                          className="c12"
+                        >
+                          <svg
+                            className=""
+                            height="13"
+                            style={
+                              Object {
+                                "transform": "rotate(0deg)",
+                              }
+                            }
+                            viewBox="0 0 9 13"
+                            width="9"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
+                              fill="rgba(73, 73, 73, 1)"
+                              fillRule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <div
+                        className="c5"
+                      >
+                        <p
+                          className="c7"
+                        >
+                          Data center network
+                        </p>
+                      </div>
                     </div>
                   </div>
-                  <div
-                    className="c3"
-                  >
-                    <p
-                      className="c5"
-                    >
-                      Data center network
-                    </p>
-                  </div>
                 </div>
               </div>
             </div>
diff --git a/packages/my-joy-beta/src/components/create-instance/description.js b/packages/my-joy-beta/src/components/create-instance/description.js
new file mode 100644
index 00000000..1c253ad4
--- /dev/null
+++ b/packages/my-joy-beta/src/components/create-instance/description.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Row, Col } from 'react-styled-flexboxgrid';
+import { Margin } from 'styled-components-spacing';
+import { P } from 'joyent-ui-toolkit';
+
+export default ({ children }) => (
+  <Row>
+    <Col xs={12} sm={8}>
+      <Margin bottom={3}>
+        <P>{children}</P>
+      </Margin>
+    </Col>
+  </Row>
+);
diff --git a/packages/my-joy-beta/src/components/create-instance/firewall.js b/packages/my-joy-beta/src/components/create-instance/firewall.js
index 28b0571a..ce6c52e9 100644
--- a/packages/my-joy-beta/src/components/create-instance/firewall.js
+++ b/packages/my-joy-beta/src/components/create-instance/firewall.js
@@ -1,3 +1,5 @@
+/* eslint-disable camelcase */
+
 import React, { Fragment } from 'react';
 import { Field } from 'redux-form';
 import { Margin, Padding } from 'styled-components-spacing';
@@ -7,17 +9,9 @@ import remcalc from 'remcalc';
 import constantCase from 'constant-case';
 
 import {
-  NameIcon,
   H3,
-  P,
   FormGroup,
-  FormLabel,
-  Input,
-  FormMeta,
-  Button,
   Toggle,
-  Card,
-  CardOutlet,
   Divider,
   Row,
   Col,
@@ -25,7 +19,6 @@ import {
 } from 'joyent-ui-toolkit';
 
 import Tag from '@components/instances/tags';
-import Title from './title';
 
 const Box = styled.div`
   display: inline-block;
@@ -131,8 +124,7 @@ export default ({
     </Margin>
     {enabled && defaultRules.length ? (
       <Fragment>
-        <H3>Default firewall rules</H3>
-        <span /> {/* trick H3 margin sibling rule */}
+        <H3 noMargin>Default firewall rules</H3>
         <Margin top={3}>
           {defaultRules.map(rule => (
             <Margin bottom={2}>
@@ -147,8 +139,7 @@ export default ({
     ) : null}
     {enabled && tagRules.length ? (
       <Fragment>
-        <H3>Firewall rules from instance tags</H3>
-        <span /> {/* trick H3 margin sibling rule */}
+        <H3 noMargin>Firewall rules from instance tags</H3>
         <Margin top={3}>
           {tagRules.map(rule => (
             <Margin bottom={2}>
diff --git a/packages/my-joy-beta/src/components/create-instance/image.js b/packages/my-joy-beta/src/components/create-instance/image.js
index 73209e3f..8c0712fe 100644
--- a/packages/my-joy-beta/src/components/create-instance/image.js
+++ b/packages/my-joy-beta/src/components/create-instance/image.js
@@ -19,6 +19,7 @@ import {
   Select,
   StatusLoader
 } from 'joyent-ui-toolkit';
+import Description from '@components/create-instance/description';
 
 const fadeIn = keyframes`
   from {
@@ -103,20 +104,18 @@ export default ({
   <form onSubmit={handleSubmit}>
     {expanded && (
       <Fragment>
-        <Margin bottom={3}>
-          <P>
-            Hardware virtual machines are generally used for non-containerized
-            applications. Infrastructure containers are generally for running
-            any Linux image on secure, bare metal containers.{' '}
-            <a
-              href="https://docs.joyent.com/private-cloud/images"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              Read the docs
-            </a>
-          </P>
-        </Margin>
+        <Description>
+          Hardware virtual machines are generally used for non-containerized
+          applications. Infrastructure containers are generally for running any
+          Linux image on secure, bare metal containers.{' '}
+          <a
+            href="https://docs.joyent.com/private-cloud/images"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Read the docs
+          </a>
+        </Description>
         {loading ? (
           <StatusLoader />
         ) : (
diff --git a/packages/my-joy-beta/src/components/create-instance/name.js b/packages/my-joy-beta/src/components/create-instance/name.js
index d2787b94..976a30c2 100644
--- a/packages/my-joy-beta/src/components/create-instance/name.js
+++ b/packages/my-joy-beta/src/components/create-instance/name.js
@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react';
 import { Field } from 'redux-form';
 import { Margin } from 'styled-components-spacing';
+import Description from '@components/create-instance/description';
 
 import {
   H3,
-  P,
   FormGroup,
   FormLabel,
   Input,
@@ -16,11 +16,9 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
   <form onSubmit={handleSubmit}>
     {expanded ? (
       <Fragment>
-        <Margin bottom={3}>
-          <P>
-            Your instance name will be used to identify this specific instance.
-          </P>
-        </Margin>
+        <Description>
+          Your instance name will be used to identify this specific instance.
+        </Description>
         <FormGroup name="name" fluid field={Field}>
           <FormLabel>Name</FormLabel>
           <Input />
diff --git a/packages/my-joy-beta/src/components/create-instance/network.js b/packages/my-joy-beta/src/components/create-instance/network.js
index 16164239..e9ddb325 100644
--- a/packages/my-joy-beta/src/components/create-instance/network.js
+++ b/packages/my-joy-beta/src/components/create-instance/network.js
@@ -1,9 +1,12 @@
+/* eslint-disable camelcase */
+
 import React from 'react';
 import { Field } from 'redux-form';
 import { Margin, Padding } from 'styled-components-spacing';
 import styled from 'styled-components';
 import Flex, { FlexItem } from 'styled-flex-component';
 import remcalc from 'remcalc';
+import { Row, Col } from 'react-styled-flexboxgrid';
 
 import {
   H4,
@@ -34,54 +37,58 @@ const Box = styled.div`
 `;
 
 export const Collapsed = ({ name, fabric, ...network }) => (
-  <Margin inline right={3} top={3}>
-    <Box>
-      <Flex column>
-        <FlexItem>
-          <Margin left={3} right={3} top={2} bottom={2}>
-            <P>{name}</P>
-          </Margin>
-        </FlexItem>
-        <FlexItem>
-          <Divider height={remcalc(1)} />
-        </FlexItem>
-        <FlexItem>
-          <Margin left={3} right={3} top={2} bottom={2}>
-            <Flex>
-              <Margin right={4}>
-                <FlexItem>
-                  <Flex alignCenter>
-                    <FlexItem>
-                      <Margin right={1}>
-                        {network.public ? <PublicIcon /> : <PrivateIcon />}
-                      </Margin>
-                    </FlexItem>
-                    <FlexItem>
-                      <P>{network.public ? 'Public' : 'Private'}</P>
-                    </FlexItem>
-                  </Flex>
-                </FlexItem>
+  <Row>
+    <Col xs={12} sm={8}>
+      <Margin inline right={3} top={3}>
+        <Box>
+          <Flex column>
+            <FlexItem>
+              <Margin left={3} right={3} top={2} bottom={2}>
+                <P>{name}</P>
               </Margin>
-              <Margin>
-                <FlexItem>
-                  <Flex alignCenter>
+            </FlexItem>
+            <FlexItem>
+              <Divider height={remcalc(1)} />
+            </FlexItem>
+            <FlexItem>
+              <Margin left={3} right={3} top={2} bottom={2}>
+                <Flex>
+                  <Margin right={4}>
                     <FlexItem>
-                      <Margin right={1}>
-                        {fabric ? <FabricIcon /> : <DataCenterIcon />}
-                      </Margin>
+                      <Flex alignCenter>
+                        <FlexItem>
+                          <Margin right={1}>
+                            {network.public ? <PublicIcon /> : <PrivateIcon />}
+                          </Margin>
+                        </FlexItem>
+                        <FlexItem>
+                          <P>{network.public ? 'Public' : 'Private'}</P>
+                        </FlexItem>
+                      </Flex>
                     </FlexItem>
+                  </Margin>
+                  <Margin>
                     <FlexItem>
-                      <P>{fabric ? 'Fabric' : 'Data center network'}</P>
+                      <Flex alignCenter>
+                        <FlexItem>
+                          <Margin right={1}>
+                            {fabric ? <FabricIcon /> : <DataCenterIcon />}
+                          </Margin>
+                        </FlexItem>
+                        <FlexItem>
+                          <P>{fabric ? 'Fabric' : 'Data center network'}</P>
+                        </FlexItem>
+                      </Flex>
                     </FlexItem>
-                  </Flex>
-                </FlexItem>
+                  </Margin>
+                </Flex>
               </Margin>
-            </Flex>
-          </Margin>
-        </FlexItem>
-      </Flex>
-    </Box>
-  </Margin>
+            </FlexItem>
+          </Flex>
+        </Box>
+      </Margin>
+    </Col>
+  </Row>
 );
 
 export const Expanded = ({
@@ -97,108 +104,112 @@ export const Expanded = ({
   onInfoClick,
   ...network
 }) => (
-  <Margin bottom={4}>
-    <Card shadow>
-      <CardHeader secondary={selected}>
-        <CardHeaderBox>
-          <FormGroup name={id} field={Field}>
-            <Checkbox noMargin />
-          </FormGroup>
-        </CardHeaderBox>
-        <CardHeaderMeta paddingLeft={0}>
-          <H4 white={selected}>{name}</H4>
-        </CardHeaderMeta>
-      </CardHeader>
-      <CardOutlet>
-        <Padding all={4}>
-          {description && (
-            <Margin bottom={3}>
-              <P>{description}</P>
-            </Margin>
-          )}
-          <Flex>
-            <Margin right={4}>
-              <FlexItem>
-                <Flex alignCenter>
+  <Row>
+    <Col xs={12} sm={8}>
+      <Margin bottom={4}>
+        <Card shadow>
+          <CardHeader secondary={selected}>
+            <CardHeaderBox>
+              <FormGroup name={id} field={Field}>
+                <Checkbox noMargin />
+              </FormGroup>
+            </CardHeaderBox>
+            <CardHeaderMeta paddingLeft={0}>
+              <H4 white={selected}>{name}</H4>
+            </CardHeaderMeta>
+          </CardHeader>
+          <CardOutlet>
+            <Padding all={4}>
+              {description && (
+                <Margin bottom={3}>
+                  <P>{description}</P>
+                </Margin>
+              )}
+              <Flex>
+                <Margin right={4}>
                   <FlexItem>
-                    <Margin right={1}>
-                      {network.public ? <PublicIcon /> : <PrivateIcon />}
-                    </Margin>
+                    <Flex alignCenter>
+                      <FlexItem>
+                        <Margin right={1}>
+                          {network.public ? <PublicIcon /> : <PrivateIcon />}
+                        </Margin>
+                      </FlexItem>
+                      <FlexItem>
+                        <P>{network.public ? 'Public' : 'Private'}</P>
+                      </FlexItem>
+                    </Flex>
                   </FlexItem>
+                </Margin>
+                <Margin right={4}>
                   <FlexItem>
-                    <P>{network.public ? 'Public' : 'Private'}</P>
+                    <Flex alignCenter>
+                      <FlexItem>
+                        <Margin right={1}>
+                          {fabric ? <FabricIcon /> : <DataCenterIcon />}
+                        </Margin>
+                      </FlexItem>
+                      <FlexItem>
+                        <P>{fabric ? 'Fabric' : 'Data center network'}</P>
+                      </FlexItem>
+                    </Flex>
                   </FlexItem>
-                </Flex>
-              </FlexItem>
-            </Margin>
-            <Margin right={4}>
-              <FlexItem>
-                <Flex alignCenter>
-                  <FlexItem>
-                    <Margin right={1}>
-                      {fabric ? <FabricIcon /> : <DataCenterIcon />}
-                    </Margin>
-                  </FlexItem>
-                  <FlexItem>
-                    <P>{fabric ? 'Fabric' : 'Data center network'}</P>
-                  </FlexItem>
-                </Flex>
-              </FlexItem>
-            </Margin>
-          </Flex>
-          {fabric ? (
-            <Margin top={3}>
-              <Card collapsed={!infoExpanded} actionable={!infoExpanded}>
-                <CardHeader
-                  secondary={false}
-                  transparent={false}
-                  onClick={onInfoClick}
-                >
-                  <CardHeaderMeta>
-                    <Padding left={3} right={3}>
-                      <P>Network information</P>
-                    </Padding>
-                  </CardHeaderMeta>
-                  <CardHeaderBox>
-                    <ArrowIcon direction={infoExpanded ? 'up' : 'down'} />
-                  </CardHeaderBox>
-                </CardHeader>
-                {infoExpanded ? (
-                  <CardOutlet>
-                    <Padding all={3}>
-                      <Flex column>
-                        <FlexItem>
-                          <FormGroup name="id">
-                            <FormLabel>ID</FormLabel>
-                            <Input type="text" value={id} />
-                          </FormGroup>
-                        </FlexItem>
-                        <FlexItem>
-                          <FormGroup name="subnet">
-                            <FormLabel>Subnet</FormLabel>
-                            <Input type="text" value={subnet} />
-                          </FormGroup>
-                        </FlexItem>
-                        <FlexItem>
-                          <FormGroup name="ip-range">
-                            <FormLabel>IP range</FormLabel>
-                            <Input
-                              type="text"
-                              value={`${provision_start_ip} - ${provision_end_ip}`}
-                            />
-                          </FormGroup>
-                        </FlexItem>
-                      </Flex>
-                    </Padding>
-                  </CardOutlet>
-                ) : null}
-              </Card>
-            </Margin>
-          ) : null}
-        </Padding>
-      </CardOutlet>
-    </Card>
-  </Margin>
+                </Margin>
+              </Flex>
+              {fabric ? (
+                <Margin top={3}>
+                  <Card collapsed={!infoExpanded} actionable={!infoExpanded}>
+                    <CardHeader
+                      secondary={false}
+                      transparent={false}
+                      onClick={onInfoClick}
+                    >
+                      <CardHeaderMeta>
+                        <Padding left={3} right={3}>
+                          <P>Network information</P>
+                        </Padding>
+                      </CardHeaderMeta>
+                      <CardHeaderBox>
+                        <ArrowIcon direction={infoExpanded ? 'up' : 'down'} />
+                      </CardHeaderBox>
+                    </CardHeader>
+                    {infoExpanded ? (
+                      <CardOutlet>
+                        <Padding all={3}>
+                          <Flex column>
+                            <FlexItem>
+                              <FormGroup name="id">
+                                <FormLabel>ID</FormLabel>
+                                <Input type="text" value={id} />
+                              </FormGroup>
+                            </FlexItem>
+                            <FlexItem>
+                              <FormGroup name="subnet">
+                                <FormLabel>Subnet</FormLabel>
+                                <Input type="text" value={subnet} />
+                              </FormGroup>
+                            </FlexItem>
+                            <FlexItem>
+                              <FormGroup name="ip-range">
+                                <FormLabel>IP range</FormLabel>
+                                <Input
+                                  type="text"
+                                  value={`${provision_start_ip} - ${provision_end_ip}`}
+                                />
+                              </FormGroup>
+                            </FlexItem>
+                          </Flex>
+                        </Padding>
+                      </CardOutlet>
+                    ) : null}
+                  </Card>
+                </Margin>
+              ) : null}
+            </Padding>
+          </CardOutlet>
+        </Card>
+      </Margin>
+    </Col>
+  </Row>
 );
 
 export default ({ small = false, ...rest }) =>
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
index d0e23d1e..20520c7a 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
@@ -384,45 +384,101 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
     >
-        Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance.
-         
-        <a
-            href="https://docs.joyent.com/public-cloud/tags-metadata/metadata"
-            target="__blank"
+        <div
+            className="c2"
         >
-            Read the docs
-        </a>
-    </p>
+            <p
+                className="c3"
+            >
+                Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance.
+                 
+                <a
+                    href="https://docs.joyent.com/public-cloud/tags-metadata/metadata"
+                    target="__blank"
+                >
+                    Read the docs
+                </a>
+            </p>
+        </div>
+    </div>
 </div>,
   .c20 {
   font-family: sans-serif;
@@ -1839,45 +1895,101 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
     >
-        Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance.
-         
-        <a
-            href="https://docs.joyent.com/public-cloud/tags-metadata/metadata"
-            target="__blank"
+        <div
+            className="c2"
         >
-            Read the docs
-        </a>
-    </p>
+            <p
+                className="c3"
+            >
+                Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance.
+                 
+                <a
+                    href="https://docs.joyent.com/public-cloud/tags-metadata/metadata"
+                    target="__blank"
+                >
+                    Read the docs
+                </a>
+            </p>
+        </div>
+    </div>
 </div>,
   .c2 {
   font-family: sans-serif;
@@ -4539,45 +4651,101 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
     >
-        Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance.
-         
-        <a
-            href="https://docs.joyent.com/public-cloud/tags-metadata/metadata"
-            target="__blank"
+        <div
+            className="c2"
         >
-            Read the docs
-        </a>
-    </p>
+            <p
+                className="c3"
+            >
+                Metadata can be used to pass data to the instance. It can also be used to inject a custom boot script. Unlike tags, metadata is only viewable inside the instance.
+                 
+                <a
+                    href="https://docs.joyent.com/public-cloud/tags-metadata/metadata"
+                    target="__blank"
+                >
+                    Read the docs
+                </a>
+            </p>
+        </div>
+    </div>
 </div>,
   .c21 {
   font-family: sans-serif;
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
index 83261515..d7206c61 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
@@ -493,45 +493,101 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
     >
-        Instances are automatically connected to a private fabric network, which is the best choice for internal communication within your application. Data center networks are the best choice for exposing your application to the public internet (if the data center network is a public network).
-         
-        <a
-            href="https://docs.joyent.com/public-cloud/network/sdn"
-            target="__blank"
+        <div
+            className="c2"
         >
-            Read more
-        </a>
-    </p>
+            <p
+                className="c3"
+            >
+                Instances are automatically connected to a private fabric network, which is the best choice for internal communication within your application. Data center networks are the best choice for exposing your application to the public internet (if the data center network is a public network).
+                 
+                <a
+                    href="https://docs.joyent.com/public-cloud/network/sdn"
+                    target="__blank"
+                >
+                    Read more
+                </a>
+            </p>
+        </div>
+    </div>
 </div>,
   .c1 {
   fill: rgb(59,70,204);
@@ -925,27 +981,27 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c5 {
+  .c7 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
   padding-bottom: 2.25rem;
 }
 
-.c7 {
+.c0 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -964,34 +1020,43 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c6 {
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c8 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c11 {
+.c12 {
   margin-right: 0.25rem;
 }
 
-.c0 {
+.c2 {
   display: inline-block;
   margin-top: 1rem;
   margin-right: 1rem;
 }
 
-.c4 {
+.c6 {
   margin-top: 0.5rem;
   margin-right: 1rem;
   margin-bottom: 0.5rem;
   margin-left: 1rem;
 }
 
-.c9 {
+.c10 {
   margin-right: 2rem;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1011,7 +1076,7 @@ Array [
   align-content: stretch;
 }
 
-.c2 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1034,7 +1099,7 @@ Array [
   flex-direction: column;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1058,7 +1123,7 @@ Array [
   align-items: center;
 }
 
-.c3 {
+.c5 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1074,7 +1139,7 @@ Array [
   flex-shrink: 1;
 }
 
-.c1 {
+.c3 {
   display: inline-block;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -1082,6 +1147,26 @@ Array [
   min-width: 18.75rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <form>
     <div
         className="c0"
@@ -1098,120 +1183,128 @@ Array [
                     <div
                         className="c4"
                     >
-                        <p
+                        <div
                             className="c5"
                         >
-                            name2
-                        </p>
-                    </div>
-                </div>
-                <div
-                    className="c3"
-                >
-                    <div
-                        className="c6 c7"
-                        height="0.0625rem"
-                    />
-                </div>
-                <div
-                    className="c3"
-                >
-                    <div
-                        className="c4"
-                    >
+                            <div
+                                className="c6"
+                            >
+                                <p
+                                    className="c7"
+                                >
+                                    name2
+                                </p>
+                            </div>
+                        </div>
                         <div
-                            className="c8"
+                            className="c5"
                         >
                             <div
-                                className="c9"
+                                className="c8 c0"
+                                height="0.0625rem"
+                            />
+                        </div>
+                        <div
+                            className="c5"
+                        >
+                            <div
+                                className="c6"
                             >
                                 <div
-                                    className="c3"
+                                    className="c9"
                                 >
                                     <div
                                         className="c10"
                                     >
                                         <div
-                                            className="c3"
+                                            className="c5"
                                         >
                                             <div
                                                 className="c11"
                                             >
-                                                <svg
-                                                    className=""
-                                                    height="16"
-                                                    style={
-                                                        Object {
-                                                            "transform": "rotate(0deg)",
-                                                          }
-                                                    }
-                                                    viewBox="0 0 12 16"
-                                                    width="12"
-                                                    xmlns="http://www.w3.org/2000/svg"
+                                                <div
+                                                    className="c5"
                                                 >
-                                                    <path
-                                                        d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                                                        fill="rgba(73, 73, 73, 1)"
-                                                    />
-                                                </svg>
+                                                    <div
+                                                        className="c12"
+                                                    >
+                                                        <svg
+                                                            className=""
+                                                            height="16"
+                                                            style={
+                                                                Object {
+                                                                    "transform": "rotate(0deg)",
+                                                                  }
+                                                            }
+                                                            viewBox="0 0 12 16"
+                                                            width="12"
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                            <path
+                                                                d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                                                                fill="rgba(73, 73, 73, 1)"
+                                                            />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div
+                                                    className="c5"
+                                                >
+                                                    <p
+                                                        className="c7"
+                                                    >
+                                                        Private
+                                                    </p>
+                                                </div>
                                             </div>
                                         </div>
-                                        <div
-                                            className="c3"
-                                        >
-                                            <p
-                                                className="c5"
-                                            >
-                                                Private
-                                            </p>
-                                        </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div
-                                className=""
-                            >
-                                <div
-                                    className="c3"
-                                >
                                     <div
-                                        className="c10"
+                                        className=""
                                     >
                                         <div
-                                            className="c3"
+                                            className="c5"
                                         >
                                             <div
                                                 className="c11"
                                             >
-                                                <svg
-                                                    className=""
-                                                    height="13"
-                                                    style={
-                                                        Object {
-                                                            "transform": "rotate(0deg)",
-                                                          }
-                                                    }
-                                                    viewBox="0 0 9 13"
-                                                    width="9"
-                                                    xmlns="http://www.w3.org/2000/svg"
+                                                <div
+                                                    className="c5"
                                                 >
-                                                    <path
-                                                        d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
-                                                        fill="rgba(73, 73, 73, 1)"
-                                                        fillRule="evenodd"
-                                                    />
-                                                </svg>
+                                                    <div
+                                                        className="c12"
+                                                    >
+                                                        <svg
+                                                            className=""
+                                                            height="13"
+                                                            style={
+                                                                Object {
+                                                                    "transform": "rotate(0deg)",
+                                                                  }
+                                                            }
+                                                            viewBox="0 0 9 13"
+                                                            width="9"
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                            <path
+                                                                d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
+                                                                fill="rgba(73, 73, 73, 1)"
+                                                                fillRule="evenodd"
+                                                            />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div
+                                                    className="c5"
+                                                >
+                                                    <p
+                                                        className="c7"
+                                                    >
+                                                        Data center network
+                                                    </p>
+                                                </div>
                                             </div>
                                         </div>
-                                        <div
-                                            className="c3"
-                                        >
-                                            <p
-                                                className="c5"
-                                            >
-                                                Data center network
-                                            </p>
-                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -1387,67 +1480,151 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
     >
-        Instances are automatically connected to a private fabric network, which is the best choice for internal communication within your application. Data center networks are the best choice for exposing your application to the public internet (if the data center network is a public network).
-         
-        <a
-            href="https://docs.joyent.com/public-cloud/network/sdn"
-            target="__blank"
+        <div
+            className="c2"
         >
-            Read more
-        </a>
-    </p>
+            <p
+                className="c3"
+            >
+                Instances are automatically connected to a private fabric network, which is the best choice for internal communication within your application. Data center networks are the best choice for exposing your application to the public internet (if the data center network is a public network).
+                 
+                <a
+                    href="https://docs.joyent.com/public-cloud/network/sdn"
+                    target="__blank"
+                >
+                    Read more
+                </a>
+            </p>
+        </div>
+    </div>
 </div>,
-  .c14 {
+  .c16 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c14 + p,
-.c14 + small,
-.c14 + h1,
-.c14 + h2,
-.c14 + label,
-.c14 + h3,
-.c14 + h4,
-.c14 + h5,
-.c14 + div,
-.c14 + span {
+.c16 + p,
+.c16 + small,
+.c16 + h1,
+.c16 + h2,
+.c16 + label,
+.c16 + h3,
+.c16 + h4,
+.c16 + h5,
+.c16 + div,
+.c16 + span {
   padding-bottom: 2.25rem;
 }
 
-.c10 {
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c12 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1455,20 +1632,20 @@ Array [
   margin: 0;
 }
 
-.c10 + p,
-.c10 + small,
-.c10 + h1,
-.c10 + h2,
-.c10 + label,
-.c10 + h3,
-.c10 + h4,
-.c10 + h5,
-.c10 + div,
-.c10 + span {
+.c12 + p,
+.c12 + small,
+.c12 + h1,
+.c12 + h2,
+.c12 + label,
+.c12 + h3,
+.c12 + h4,
+.c12 + h5,
+.c12 + div,
+.c12 + span {
   margin-top: 0.75rem;
 }
 
-.c28 {
+.c30 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1478,20 +1655,20 @@ Array [
   color: rgb(255,255,255);
 }
 
-.c28 + p,
-.c28 + small,
-.c28 + h1,
-.c28 + h2,
-.c28 + label,
-.c28 + h3,
-.c28 + h4,
-.c28 + h5,
-.c28 + div,
-.c28 + span {
+.c30 + p,
+.c30 + small,
+.c30 + h1,
+.c30 + h2,
+.c30 + label,
+.c30 + h3,
+.c30 + h4,
+.c30 + h5,
+.c30 + div,
+.c30 + span {
   margin-top: 0.75rem;
 }
 
-.c1 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1514,7 +1691,7 @@ Array [
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c21 {
+.c23 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1542,7 +1719,7 @@ Array [
   flex: 0 0 2.875rem;
 }
 
-.c11 {
+.c13 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1578,15 +1755,15 @@ Array [
   background-color: transparent;
 }
 
-.c11 > [name='card']:not(:last-child) {
+.c13 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c11 > [name='card']:last-child {
+.c13 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c2 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1621,12 +1798,12 @@ Array [
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c2 button {
+.c4 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c22 {
+.c24 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1664,12 +1841,12 @@ Array [
   box-shadow: none;
 }
 
-.c22 button {
+.c24 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c25 {
+.c27 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1707,12 +1884,12 @@ Array [
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c25 button {
+.c27 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c3 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1765,7 +1942,7 @@ Array [
   box-shadow: none;
 }
 
-.c26 {
+.c28 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1821,7 +1998,7 @@ Array [
   box-shadow: none;
 }
 
-.c9 {
+.c11 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1879,7 +2056,7 @@ Array [
   color: inherit;
 }
 
-.c23 {
+.c25 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1938,7 +2115,7 @@ Array [
   color: inherit;
 }
 
-.c27 {
+.c29 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1999,7 +2176,7 @@ Array [
   color: inherit;
 }
 
-.c7 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2008,59 +2185,59 @@ Array [
   display: none;
 }
 
-.c7[type='checkbox'],
-.c7[type='radio'] {
+.c9[type='checkbox'],
+.c9[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c7[type='number']::-webkit-inner-spin-button,
-.c7[type='number']::-webkit-outer-spin-button {
+.c9[type='number']::-webkit-inner-spin-button,
+.c9[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c7[type='search'] {
+.c9[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c7[type='search']::-webkit-search-cancel-button,
-.c7[type='search']::-webkit-search-decoration {
+.c9[type='search']::-webkit-search-cancel-button,
+.c9[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c7::-webkit-file-upload-button {
+.c9::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c7:checked + label::after {
+.c9:checked + label::after {
   opacity: 1;
 }
 
-.c7:selected + label::after {
+.c9:selected + label::after {
   opacity: 1;
 }
 
-.c7:checked + label {
+.c9:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:selected + label {
+.c9:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c7:disabled + label {
+.c9:disabled + label {
   background-color: rgb(249,249,249);
 }
 
-.c8 {
+.c10 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -2078,7 +2255,7 @@ Array [
   height: 1.125rem;
 }
 
-.c8::after {
+.c10::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -2095,7 +2272,7 @@ Array [
   transform: rotate(-45deg);
 }
 
-.c6 {
+.c8 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -2104,7 +2281,7 @@ Array [
   cursor: pointer;
 }
 
-.c5 {
+.c7 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2116,11 +2293,11 @@ Array [
   align-items: center;
 }
 
-.c5 label {
+.c7 label {
   font-weight: 400;
 }
 
-.c4 {
+.c6 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -2135,36 +2312,36 @@ Array [
   -webkit-padding-after: 0;
 }
 
-.c19 {
+.c21 {
   margin-right: 0.25rem;
 }
 
-.c13 {
+.c15 {
   margin-bottom: 1rem;
 }
 
-.c16 {
+.c18 {
   margin-right: 2rem;
 }
 
-.c0 {
+.c2 {
   margin-bottom: 2rem;
 }
 
-.c20 {
+.c22 {
   margin-top: 1rem;
 }
 
-.c12 {
+.c14 {
   padding: 2rem;
 }
 
-.c24 {
+.c26 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c15 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2184,7 +2361,7 @@ Array [
   align-content: stretch;
 }
 
-.c18 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2208,7 +2385,7 @@ Array [
   align-items: center;
 }
 
-.c17 {
+.c19 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -2224,90 +2401,110 @@ Array [
   flex-shrink: 1;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <form>
     <div
         className="c0"
     >
         <div
             className="c1"
-            disabled={false}
-            name="card"
         >
             <div
                 className="c2"
-                disabled={false}
-                name="card-header"
             >
                 <div
                     className="c3"
                     disabled={false}
-                    name="card-header-box"
+                    name="card"
                 >
                     <div
                         className="c4"
-                        name="1"
-                        role="group"
-                        style={undefined}
+                        disabled={false}
+                        name="card-header"
                     >
-                        <li
+                        <div
                             className="c5"
+                            disabled={false}
+                            name="card-header-box"
                         >
                             <div
-                                checked={false}
                                 className="c6"
-                                disabled={false}
-                                id="Y"
-                                type="checkbox"
+                                name="1"
+                                role="group"
+                                style={undefined}
                             >
-                                <input
-                                    checked={false}
+                                <li
                                     className="c7"
-                                    disabled={false}
-                                    id="Z"
-                                    type="checkbox"
-                                />
-                                <label
-                                    className="c8"
-                                    htmlFor="Z"
-                                />
+                                >
+                                    <div
+                                        checked={false}
+                                        className="c8"
+                                        disabled={false}
+                                        id="Y"
+                                        type="checkbox"
+                                    >
+                                        <input
+                                            checked={false}
+                                            className="c9"
+                                            disabled={false}
+                                            id="Z"
+                                            type="checkbox"
+                                        />
+                                        <label
+                                            className="c10"
+                                            htmlFor="Z"
+                                        />
+                                    </div>
+                                </li>
                             </div>
-                        </li>
+                        </div>
+                        <div
+                            className="c11"
+                            disabled={false}
+                            name="card-header-meta"
+                        >
+                            <h4
+                                className="c12"
+                            >
+                                name
+                            </h4>
+                        </div>
                     </div>
-                </div>
-                <div
-                    className="c9"
-                    disabled={false}
-                    name="card-header-meta"
-                >
-                    <h4
-                        className="c10"
-                    >
-                        name
-                    </h4>
-                </div>
-            </div>
-            <div
-                className="c11"
-                name="card-outlet"
-            >
-                <div
-                    className="c12"
-                >
                     <div
                         className="c13"
+                        name="card-outlet"
                     >
-                        <p
+                        <div
                             className="c14"
                         >
-                            description
-                        </p>
-                    </div>
-                    <div
-                        className="c15"
-                    >
-                        <div
-                            className="c16"
-                        >
+                            <div
+                                className="c15"
+                            >
+                                <p
+                                    className="c16"
+                                >
+                                    description
+                                </p>
+                            </div>
                             <div
                                 className="c17"
                             >
@@ -2315,144 +2512,152 @@ Array [
                                     className="c18"
                                 >
                                     <div
-                                        className="c17"
+                                        className="c19"
                                     >
                                         <div
-                                            className="c19"
+                                            className="c20"
                                         >
-                                            <svg
-                                                className=""
-                                                height="16"
-                                                style={
-                                                    Object {
-                                                        "transform": "rotate(0deg)",
-                                                      }
-                                                }
-                                                viewBox="0 0 12 16"
-                                                width="12"
-                                                xmlns="http://www.w3.org/2000/svg"
+                                            <div
+                                                className="c19"
                                             >
-                                                <path
-                                                    d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                                                    fill="rgba(73, 73, 73, 1)"
-                                                />
-                                            </svg>
+                                                <div
+                                                    className="c21"
+                                                >
+                                                    <svg
+                                                        className=""
+                                                        height="16"
+                                                        style={
+                                                            Object {
+                                                                "transform": "rotate(0deg)",
+                                                              }
+                                                        }
+                                                        viewBox="0 0 12 16"
+                                                        width="12"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                    >
+                                                        <path
+                                                            d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                                                            fill="rgba(73, 73, 73, 1)"
+                                                        />
+                                                    </svg>
+                                                </div>
+                                            </div>
+                                            <div
+                                                className="c19"
+                                            >
+                                                <p
+                                                    className="c16"
+                                                >
+                                                    Private
+                                                </p>
+                                            </div>
                                         </div>
                                     </div>
-                                    <div
-                                        className="c17"
-                                    >
-                                        <p
-                                            className="c14"
-                                        >
-                                            Private
-                                        </p>
-                                    </div>
                                 </div>
-                            </div>
-                        </div>
-                        <div
-                            className="c16"
-                        >
-                            <div
-                                className="c17"
-                            >
                                 <div
                                     className="c18"
                                 >
                                     <div
-                                        className="c17"
+                                        className="c19"
                                     >
                                         <div
-                                            className="c19"
+                                            className="c20"
                                         >
-                                            <svg
-                                                className=""
-                                                height="17"
-                                                style={
-                                                    Object {
-                                                        "transform": "rotate(0deg)",
-                                                      }
-                                                }
-                                                version="1.1"
-                                                viewBox="0 0 16.2 16.2"
-                                                width="17"
-                                                xmlns="http://www.w3.org/2000/svg"
-                                                xmlnsXlink="http://www.w3.org/1999/xlink"
+                                            <div
+                                                className="c19"
                                             >
-                                                <path
-                                                    d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
-                                                    fill="rgba(73, 73, 73, 1)"
-                                                />
-                                            </svg>
+                                                <div
+                                                    className="c21"
+                                                >
+                                                    <svg
+                                                        className=""
+                                                        height="17"
+                                                        style={
+                                                            Object {
+                                                                "transform": "rotate(0deg)",
+                                                              }
+                                                        }
+                                                        version="1.1"
+                                                        viewBox="0 0 16.2 16.2"
+                                                        width="17"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        xmlnsXlink="http://www.w3.org/1999/xlink"
+                                                    >
+                                                        <path
+                                                            d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
+                                                            fill="rgba(73, 73, 73, 1)"
+                                                        />
+                                                    </svg>
+                                                </div>
+                                            </div>
+                                            <div
+                                                className="c19"
+                                            >
+                                                <p
+                                                    className="c16"
+                                                >
+                                                    Fabric
+                                                </p>
+                                            </div>
                                         </div>
                                     </div>
-                                    <div
-                                        className="c17"
-                                    >
-                                        <p
-                                            className="c14"
-                                        >
-                                            Fabric
-                                        </p>
-                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c20"
-                    >
-                        <div
-                            className="c21"
-                            disabled={false}
-                            name="card"
-                        >
                             <div
                                 className="c22"
-                                disabled={false}
-                                name="card-header"
-                                onClick={[Function]}
                             >
                                 <div
                                     className="c23"
                                     disabled={false}
-                                    name="card-header-meta"
+                                    name="card"
                                 >
                                     <div
                                         className="c24"
+                                        disabled={false}
+                                        name="card-header"
+                                        onClick={[Function]}
                                     >
-                                        <p
-                                            className="c14"
+                                        <div
+                                            className="c25"
+                                            disabled={false}
+                                            name="card-header-meta"
                                         >
-                                            Network information
-                                        </p>
+                                            <div
+                                                className="c26"
+                                            >
+                                                <p
+                                                    className="c16"
+                                                >
+                                                    Network information
+                                                </p>
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c5"
+                                            disabled={false}
+                                            name="card-header-box"
+                                        >
+                                            <svg
+                                                className=""
+                                                height="6"
+                                                style={
+                                                    Object {
+                                                        "transform": "rotate(0deg)",
+                                                      }
+                                                }
+                                                viewBox="0 0 9 6"
+                                                width="9"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                            >
+                                                <path
+                                                    d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
+                                                    fill="rgba(73, 73, 73, 1)"
+                                                    fillRule="evenodd"
+                                                />
+                                            </svg>
+                                        </div>
                                     </div>
                                 </div>
-                                <div
-                                    className="c3"
-                                    disabled={false}
-                                    name="card-header-box"
-                                >
-                                    <svg
-                                        className=""
-                                        height="6"
-                                        style={
-                                            Object {
-                                                "transform": "rotate(0deg)",
-                                              }
-                                        }
-                                        viewBox="0 0 9 6"
-                                        width="9"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                        <path
-                                            d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
-                                            fill="rgba(73, 73, 73, 1)"
-                                            fillRule="evenodd"
-                                        />
-                                    </svg>
-                                </div>
                             </div>
                         </div>
                     </div>
@@ -2465,130 +2670,84 @@ Array [
     >
         <div
             className="c1"
-            disabled={false}
-            name="card"
         >
             <div
-                className="c25"
-                disabled={false}
-                name="card-header"
+                className="c2"
             >
                 <div
-                    className="c26"
+                    className="c3"
                     disabled={false}
-                    name="card-header-box"
+                    name="card"
                 >
                     <div
-                        className="c4"
-                        name="2"
-                        role="group"
-                        style={undefined}
-                    >
-                        <li
-                            className="c5"
-                        >
-                            <div
-                                checked={false}
-                                className="c6"
-                                disabled={false}
-                                id="a"
-                                type="checkbox"
-                            >
-                                <input
-                                    checked={false}
-                                    className="c7"
-                                    disabled={false}
-                                    id="bb"
-                                    type="checkbox"
-                                />
-                                <label
-                                    className="c8"
-                                    htmlFor="bb"
-                                />
-                            </div>
-                        </li>
-                    </div>
-                </div>
-                <div
-                    className="c27"
-                    disabled={false}
-                    name="card-header-meta"
-                >
-                    <h4
-                        className="c28"
-                    >
-                        name2
-                    </h4>
-                </div>
-            </div>
-            <div
-                className="c11"
-                name="card-outlet"
-            >
-                <div
-                    className="c12"
-                >
-                    <div
-                        className="c13"
-                    >
-                        <p
-                            className="c14"
-                        >
-                            description2
-                        </p>
-                    </div>
-                    <div
-                        className="c15"
+                        className="c27"
+                        disabled={false}
+                        name="card-header"
                     >
                         <div
-                            className="c16"
+                            className="c28"
+                            disabled={false}
+                            name="card-header-box"
                         >
                             <div
-                                className="c17"
+                                className="c6"
+                                name="2"
+                                role="group"
+                                style={undefined}
                             >
-                                <div
-                                    className="c18"
+                                <li
+                                    className="c7"
                                 >
                                     <div
-                                        className="c17"
+                                        checked={false}
+                                        className="c8"
+                                        disabled={false}
+                                        id="a"
+                                        type="checkbox"
                                     >
-                                        <div
-                                            className="c19"
-                                        >
-                                            <svg
-                                                className=""
-                                                height="16"
-                                                style={
-                                                    Object {
-                                                        "transform": "rotate(0deg)",
-                                                      }
-                                                }
-                                                viewBox="0 0 12 16"
-                                                width="12"
-                                                xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                                <path
-                                                    d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                                                    fill="rgba(73, 73, 73, 1)"
-                                                />
-                                            </svg>
-                                        </div>
+                                        <input
+                                            checked={false}
+                                            className="c9"
+                                            disabled={false}
+                                            id="bb"
+                                            type="checkbox"
+                                        />
+                                        <label
+                                            className="c10"
+                                            htmlFor="bb"
+                                        />
                                     </div>
-                                    <div
-                                        className="c17"
-                                    >
-                                        <p
-                                            className="c14"
-                                        >
-                                            Private
-                                        </p>
-                                    </div>
-                                </div>
+                                </li>
                             </div>
                         </div>
                         <div
-                            className="c16"
+                            className="c29"
+                            disabled={false}
+                            name="card-header-meta"
                         >
+                            <h4
+                                className="c30"
+                            >
+                                name2
+                            </h4>
+                        </div>
+                    </div>
+                    <div
+                        className="c13"
+                        name="card-outlet"
+                    >
+                        <div
+                            className="c14"
+                        >
+                            <div
+                                className="c15"
+                            >
+                                <p
+                                    className="c16"
+                                >
+                                    description2
+                                </p>
+                            </div>
                             <div
                                 className="c17"
                             >
@@ -2596,39 +2755,93 @@ Array [
                                     className="c18"
                                 >
                                     <div
-                                        className="c17"
+                                        className="c19"
                                     >
                                         <div
-                                            className="c19"
+                                            className="c20"
                                         >
-                                            <svg
-                                                className=""
-                                                height="13"
-                                                style={
-                                                    Object {
-                                                        "transform": "rotate(0deg)",
-                                                      }
-                                                }
-                                                viewBox="0 0 9 13"
-                                                width="9"
-                                                xmlns="http://www.w3.org/2000/svg"
+                                            <div
+                                                className="c19"
                                             >
-                                                <path
-                                                    d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
-                                                    fill="rgba(73, 73, 73, 1)"
-                                                    fillRule="evenodd"
-                                                />
-                                            </svg>
+                                                <div
+                                                    className="c21"
+                                                >
+                                                    <svg
+                                                        className=""
+                                                        height="16"
+                                                        style={
+                                                            Object {
+                                                                "transform": "rotate(0deg)",
+                                                              }
+                                                        }
+                                                        viewBox="0 0 12 16"
+                                                        width="12"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                    >
+                                                        <path
+                                                            d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                                                            fill="rgba(73, 73, 73, 1)"
+                                                        />
+                                                    </svg>
+                                                </div>
+                                            </div>
+                                            <div
+                                                className="c19"
+                                            >
+                                                <p
+                                                    className="c16"
+                                                >
+                                                    Private
+                                                </p>
+                                            </div>
                                         </div>
                                     </div>
+                                </div>
+                                <div
+                                    className="c18"
+                                >
                                     <div
-                                        className="c17"
+                                        className="c19"
                                     >
-                                        <p
-                                            className="c14"
+                                        <div
+                                            className="c20"
                                         >
-                                            Data center network
-                                        </p>
+                                            <div
+                                                className="c19"
+                                            >
+                                                <div
+                                                    className="c21"
+                                                >
+                                                    <svg
+                                                        className=""
+                                                        height="13"
+                                                        style={
+                                                            Object {
+                                                                "transform": "rotate(0deg)",
+                                                              }
+                                                        }
+                                                        viewBox="0 0 9 13"
+                                                        width="9"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                    >
+                                                        <path
+                                                            d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
+                                                            fill="rgba(73, 73, 73, 1)"
+                                                            fillRule="evenodd"
+                                                        />
+                                                    </svg>
+                                                </div>
+                                            </div>
+                                            <div
+                                                className="c19"
+                                            >
+                                                <p
+                                                    className="c16"
+                                                >
+                                                    Data center network
+                                                </p>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -2943,27 +3156,27 @@ Array [
     
      added
 </h3>,
-  .c5 {
+  .c7 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
   padding-bottom: 2.25rem;
 }
 
-.c7 {
+.c0 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2982,34 +3195,43 @@ Array [
   margin-left: -0.5rem;
 }
 
-.c6 {
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c8 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c11 {
+.c12 {
   margin-right: 0.25rem;
 }
 
-.c0 {
+.c2 {
   display: inline-block;
   margin-top: 1rem;
   margin-right: 1rem;
 }
 
-.c4 {
+.c6 {
   margin-top: 0.5rem;
   margin-right: 1rem;
   margin-bottom: 0.5rem;
   margin-left: 1rem;
 }
 
-.c9 {
+.c10 {
   margin-right: 2rem;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3029,7 +3251,7 @@ Array [
   align-content: stretch;
 }
 
-.c2 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3052,7 +3274,7 @@ Array [
   flex-direction: column;
 }
 
-.c10 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3076,7 +3298,7 @@ Array [
   align-items: center;
 }
 
-.c3 {
+.c5 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3092,7 +3314,7 @@ Array [
   flex-shrink: 1;
 }
 
-.c1 {
+.c3 {
   display: inline-block;
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
@@ -3100,6 +3322,26 @@ Array [
   min-width: 18.75rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <form>
     <div
         className="c0"
@@ -3116,120 +3358,128 @@ Array [
                     <div
                         className="c4"
                     >
-                        <p
+                        <div
                             className="c5"
                         >
-                            name2
-                        </p>
-                    </div>
-                </div>
-                <div
-                    className="c3"
-                >
-                    <div
-                        className="c6 c7"
-                        height="0.0625rem"
-                    />
-                </div>
-                <div
-                    className="c3"
-                >
-                    <div
-                        className="c4"
-                    >
+                            <div
+                                className="c6"
+                            >
+                                <p
+                                    className="c7"
+                                >
+                                    name2
+                                </p>
+                            </div>
+                        </div>
                         <div
-                            className="c8"
+                            className="c5"
                         >
                             <div
-                                className="c9"
+                                className="c8 c0"
+                                height="0.0625rem"
+                            />
+                        </div>
+                        <div
+                            className="c5"
+                        >
+                            <div
+                                className="c6"
                             >
                                 <div
-                                    className="c3"
+                                    className="c9"
                                 >
                                     <div
                                         className="c10"
                                     >
                                         <div
-                                            className="c3"
+                                            className="c5"
                                         >
                                             <div
                                                 className="c11"
                                             >
-                                                <svg
-                                                    className=""
-                                                    height="16"
-                                                    style={
-                                                        Object {
-                                                            "transform": "rotate(0deg)",
-                                                          }
-                                                    }
-                                                    viewBox="0 0 12 16"
-                                                    width="12"
-                                                    xmlns="http://www.w3.org/2000/svg"
+                                                <div
+                                                    className="c5"
                                                 >
-                                                    <path
-                                                        d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
-                                                        fill="rgba(73, 73, 73, 1)"
-                                                    />
-                                                </svg>
+                                                    <div
+                                                        className="c12"
+                                                    >
+                                                        <svg
+                                                            className=""
+                                                            height="16"
+                                                            style={
+                                                                Object {
+                                                                    "transform": "rotate(0deg)",
+                                                                  }
+                                                            }
+                                                            viewBox="0 0 12 16"
+                                                            width="12"
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                            <path
+                                                                d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+                                                                fill="rgba(73, 73, 73, 1)"
+                                                            />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div
+                                                    className="c5"
+                                                >
+                                                    <p
+                                                        className="c7"
+                                                    >
+                                                        Private
+                                                    </p>
+                                                </div>
                                             </div>
                                         </div>
-                                        <div
-                                            className="c3"
-                                        >
-                                            <p
-                                                className="c5"
-                                            >
-                                                Private
-                                            </p>
-                                        </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div
-                                className=""
-                            >
-                                <div
-                                    className="c3"
-                                >
                                     <div
-                                        className="c10"
+                                        className=""
                                     >
                                         <div
-                                            className="c3"
+                                            className="c5"
                                         >
                                             <div
                                                 className="c11"
                                             >
-                                                <svg
-                                                    className=""
-                                                    height="13"
-                                                    style={
-                                                        Object {
-                                                            "transform": "rotate(0deg)",
-                                                          }
-                                                    }
-                                                    viewBox="0 0 9 13"
-                                                    width="9"
-                                                    xmlns="http://www.w3.org/2000/svg"
+                                                <div
+                                                    className="c5"
                                                 >
-                                                    <path
-                                                        d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
-                                                        fill="rgba(73, 73, 73, 1)"
-                                                        fillRule="evenodd"
-                                                    />
-                                                </svg>
+                                                    <div
+                                                        className="c12"
+                                                    >
+                                                        <svg
+                                                            className=""
+                                                            height="13"
+                                                            style={
+                                                                Object {
+                                                                    "transform": "rotate(0deg)",
+                                                                  }
+                                                            }
+                                                            viewBox="0 0 9 13"
+                                                            width="9"
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                            <path
+                                                                d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
+                                                                fill="rgba(73, 73, 73, 1)"
+                                                                fillRule="evenodd"
+                                                            />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div
+                                                    className="c5"
+                                                >
+                                                    <p
+                                                        className="c7"
+                                                    >
+                                                        Data center network
+                                                    </p>
+                                                </div>
                                             </div>
                                         </div>
-                                        <div
-                                            className="c3"
-                                        >
-                                            <p
-                                                className="c5"
-                                            >
-                                                Data center network
-                                            </p>
-                                        </div>
                                     </div>
                                 </div>
                             </div>
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
index c0ff65c2..735d0433 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
@@ -358,45 +358,101 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
     >
-        Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more.
-         
-        <a
-            href="https://docs.joyent.com/public-cloud/tags-metadata/tags"
-            target="__blank"
+        <div
+            className="c2"
         >
-            Read the docs
-        </a>
-    </p>
+            <p
+                className="c3"
+            >
+                Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more.
+                 
+                <a
+                    href="https://docs.joyent.com/public-cloud/tags-metadata/tags"
+                    target="__blank"
+                >
+                    Read the docs
+                </a>
+            </p>
+        </div>
+    </div>
 </div>,
   .c0 {
   margin: 0;
@@ -1790,45 +1846,101 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
     >
-        Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more.
-         
-        <a
-            href="https://docs.joyent.com/public-cloud/tags-metadata/tags"
-            target="__blank"
+        <div
+            className="c2"
         >
-            Read the docs
-        </a>
-    </p>
+            <p
+                className="c3"
+            >
+                Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more.
+                 
+                <a
+                    href="https://docs.joyent.com/public-cloud/tags-metadata/tags"
+                    target="__blank"
+                >
+                    Read the docs
+                </a>
+            </p>
+        </div>
+    </div>
 </div>,
   .c0 {
   margin: 0;
@@ -2414,45 +2526,101 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c1 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
 .c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c2 {
   margin-bottom: 1rem;
 }
 
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
 <div
     className="c0"
 >
-    <p
+    <div
         className="c1"
     >
-        Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more.
-         
-        <a
-            href="https://docs.joyent.com/public-cloud/tags-metadata/tags"
-            target="__blank"
+        <div
+            className="c2"
         >
-            Read the docs
-        </a>
-    </p>
+            <p
+                className="c3"
+            >
+                Tags can be used to identify your instances, group multiple instances together, define firewall and affinity rules, and more.
+                 
+                <a
+                    href="https://docs.joyent.com/public-cloud/tags-metadata/tags"
+                    target="__blank"
+                >
+                    Read the docs
+                </a>
+            </p>
+        </div>
+    </div>
 </div>,
   .c0 {
   margin: 0;
diff --git a/packages/my-joy-beta/src/containers/create-instance/affinity.js b/packages/my-joy-beta/src/containers/create-instance/affinity.js
index 2b4a56d3..7613d580 100644
--- a/packages/my-joy-beta/src/containers/create-instance/affinity.js
+++ b/packages/my-joy-beta/src/containers/create-instance/affinity.js
@@ -12,6 +12,7 @@ import { AffinityIcon, P, Button, H3 } from 'joyent-ui-toolkit';
 import Title from '@components/create-instance/title';
 import { Rule, Header } from '@components/create-instance/affinity';
 import KeyValue from '@components/instances/key-value';
+import Description from '@components/create-instance/description';
 
 const FORM_NAME_CREATE = 'CREATE-INSTANCE-AFFINITY-ADD';
 const FORM_NAME_EDIT = i => `CREATE-INSTANCE-AFFINITY-EDIT-${i}`;
@@ -46,19 +47,17 @@ export const Affinity = ({
   <Fragment>
     <Title icon={<AffinityIcon />}>Affinity</Title>
     {expanded ? (
-      <Margin bottom={3}>
-        <P>
-          Affinity rules control the location of instances, to help reduce
-          traffic across networks and keep the workload balanced. With strict
-          rules, instances are only provisioned when the criteria is met.{' '}
-          <a
-            target="__blank"
-            href="https://apidocs.joyent.com/docker/features/placement"
-          >
-            Read the docs
-          </a>
-        </P>
-      </Margin>
+      <Description>
+        Affinity rules control the location of instances, to help reduce traffic
+        across networks and keep the workload balanced. With strict rules,
+        instances are only provisioned when the criteria is met.{' '}
+        <a
+          target="__blank"
+          href="https://apidocs.joyent.com/docker/features/placement"
+        >
+          Read the docs
+        </a>
+      </Description>
     ) : null}
     {proceeded ? (
       <Margin bottom={4}>
diff --git a/packages/my-joy-beta/src/containers/create-instance/cns.js b/packages/my-joy-beta/src/containers/create-instance/cns.js
index c751f124..e56fd176 100644
--- a/packages/my-joy-beta/src/containers/create-instance/cns.js
+++ b/packages/my-joy-beta/src/containers/create-instance/cns.js
@@ -30,6 +30,7 @@ import {
 } from '@components/create-instance/cns';
 import Title from '@components/create-instance/title';
 import Tag from '@components/instances/tags';
+import Description from '@components/create-instance/description';
 
 const CNS_FORM = 'create-instance-cns';
 
@@ -50,20 +51,18 @@ const CNSContainer = ({
   <Fragment>
     <Title icon={<CnsIcon />}>Container Name Service</Title>
     {expanded ? (
-      <Margin bottom={3}>
-        <P>
-          Triton CNS is used to automatically update hostnames for your
-          instances*. You can serve multiple instances (with multiple IP
-          addresses) under the same hostname by matching the CNS service names.{' '}
-          <a
-            href="https://docs.joyent.com/private-cloud/install/cns"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read the docs
-          </a>
-        </P>
-      </Margin>
+      <Description>
+        Triton CNS is used to automatically update hostnames for your
+        instances*. You can serve multiple instances (with multiple IP
+        addresses) under the same hostname by matching the CNS service names.{' '}
+        <a
+          href="https://docs.joyent.com/private-cloud/install/cns"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Read the docs
+        </a>
+      </Description>
     ) : null}
     {expanded && cnsEnabled ? (
       <Card>
diff --git a/packages/my-joy-beta/src/containers/create-instance/firewall.js b/packages/my-joy-beta/src/containers/create-instance/firewall.js
index 178af85d..187974b9 100644
--- a/packages/my-joy-beta/src/containers/create-instance/firewall.js
+++ b/packages/my-joy-beta/src/containers/create-instance/firewall.js
@@ -5,14 +5,14 @@ import ReduxForm from 'declarative-redux-form';
 import { set } from 'react-redux-values';
 import { connect } from 'react-redux';
 import get from 'lodash.get';
-import find from 'lodash.find';
 import forceArray from 'force-array';
 
 import Title from '@components/create-instance/title';
+import Description from '@components/create-instance/description';
 import FirewallForm from '@components/create-instance/firewall';
 import ListFwRules from '@graphql/list-fw-rules.gql';
 
-import { StatusLoader, FirewallIcon, P, H3, Button } from 'joyent-ui-toolkit';
+import { StatusLoader, FirewallIcon, H3, Button } from 'joyent-ui-toolkit';
 
 const FORM_NAME = 'CREATE-INSTANCE-FIREWALL';
 
@@ -29,19 +29,17 @@ const Firewall = ({
   <Fragment>
     <Title icon={<FirewallIcon />}>Firewall</Title>
     {expanded ? (
-      <Margin bottom={3}>
-        <P>
-          Cloud Firewall rules control traffic across instances. Enabling the
-          firewall adds a default set of rules and rules defined by your chosen
-          tags.{' '}
-          <a
-            target="__blank"
-            href="https://docs.joyent.com/public-cloud/network/firewall"
-          >
-            Read more
-          </a>
-        </P>
-      </Margin>
+      <Description>
+        Cloud Firewall rules control traffic across instances. Enabling the
+        firewall adds a default set of rules and rules defined by your chosen
+        tags.{' '}
+        <a
+          target="__blank"
+          href="https://docs.joyent.com/public-cloud/network/firewall"
+        >
+          Read more
+        </a>
+      </Description>
     ) : null}
     {loading && expanded ? <StatusLoader /> : null}
     {!loading ? (
diff --git a/packages/my-joy-beta/src/containers/create-instance/metadata.js b/packages/my-joy-beta/src/containers/create-instance/metadata.js
index feb71cbe..dc6d98b8 100644
--- a/packages/my-joy-beta/src/containers/create-instance/metadata.js
+++ b/packages/my-joy-beta/src/containers/create-instance/metadata.js
@@ -10,6 +10,7 @@ import get from 'lodash.get';
 import { MetadataIcon, P, Button, H3 } from 'joyent-ui-toolkit';
 
 import Title from '@components/create-instance/title';
+import Description from '@components/create-instance/description';
 import KeyValue from '@components/instances/key-value';
 
 const FORM_NAME_CREATE = 'CREATE-INSTANCE-METADATA-ADD';
@@ -32,19 +33,17 @@ export const Metadata = ({
   <Fragment>
     <Title icon={<MetadataIcon />}>Metadata</Title>
     {expanded ? (
-      <Margin bottom={3}>
-        <P>
-          Metadata can be used to pass data to the instance. It can also be used
-          to inject a custom boot script. Unlike tags, metadata is only viewable
-          inside the instance.{' '}
-          <a
-            target="__blank"
-            href="https://docs.joyent.com/public-cloud/tags-metadata/metadata"
-          >
-            Read the docs
-          </a>
-        </P>
-      </Margin>
+      <Description>
+        Metadata can be used to pass data to the instance. It can also be used
+        to inject a custom boot script. Unlike tags, metadata is only viewable
+        inside the instance.{' '}
+        <a
+          target="__blank"
+          href="https://docs.joyent.com/public-cloud/tags-metadata/metadata"
+        >
+          Read the docs
+        </a>
+      </Description>
     ) : null}
     {proceeded ? (
       <Margin bottom={4}>
diff --git a/packages/my-joy-beta/src/containers/create-instance/networks.js b/packages/my-joy-beta/src/containers/create-instance/networks.js
index e9f983a3..4f209b2c 100644
--- a/packages/my-joy-beta/src/containers/create-instance/networks.js
+++ b/packages/my-joy-beta/src/containers/create-instance/networks.js
@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import { set } from 'react-redux-values';
-import { Margin } from 'styled-components-spacing';
 import { compose, graphql } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
@@ -9,6 +8,7 @@ import forceArray from 'force-array';
 
 import { NetworkIcon, P, Button, H3, StatusLoader } from 'joyent-ui-toolkit';
 
+import Description from '@components/create-instance/description';
 import Title from '@components/create-instance/title';
 import Network from '@components/create-instance/network';
 import ListNetworks from '@graphql/list-networks.gql';
@@ -30,21 +30,19 @@ export const Networks = ({
     <Fragment>
       <Title icon={<NetworkIcon />}>Networks</Title>
       {expanded ? (
-        <Margin bottom={3}>
-          <P>
-            Instances are automatically connected to a private fabric network,
-            which is the best choice for internal communication within your
-            application. Data center networks are the best choice for exposing
-            your application to the public internet (if the data center network
-            is a public network).{' '}
-            <a
-              target="__blank"
-              href="https://docs.joyent.com/public-cloud/network/sdn"
-            >
-              Read more
-            </a>
-          </P>
-        </Margin>
+        <Description>
+          Instances are automatically connected to a private fabric network,
+          which is the best choice for internal communication within your
+          application. Data center networks are the best choice for exposing
+          your application to the public internet (if the data center network is
+          a public network).{' '}
+          <a
+            target="__blank"
+            href="https://docs.joyent.com/public-cloud/network/sdn"
+          >
+            Read more
+          </a>
+        </Description>
       ) : null}
       {proceeded && !expanded ? (
         <H3>
diff --git a/packages/my-joy-beta/src/containers/create-instance/package.js b/packages/my-joy-beta/src/containers/create-instance/package.js
index 9890027b..c09a2cd4 100644
--- a/packages/my-joy-beta/src/containers/create-instance/package.js
+++ b/packages/my-joy-beta/src/containers/create-instance/package.js
@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import { Margin } from 'styled-components-spacing';
 import { compose, graphql } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
@@ -18,6 +17,7 @@ import {
   Overview
 } from '@components/create-instance/package';
 import Title from '@components/create-instance/title';
+import Description from '@components/create-instance/description';
 import priceData from '../../data/prices.json';
 
 import getPackages from '../../graphql/get-packages.gql';
@@ -39,19 +39,17 @@ const PackageContainer = ({
   <Fragment>
     <Title icon={<PackageIcon />}>Package</Title>
     {expanded ? (
-      <Margin bottom={3}>
-        <P>
-          A package defines the specs of your instance. On Triton, packages can
-          only increase in size.{' '}
-          <a
-            href="https://docs.joyent.com/private-cloud/packages"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read the docs
-          </a>
-        </P>
-      </Margin>
+      <Description>
+        A package defines the specs of your instance. On Triton, packages can
+        only increase in size.{' '}
+        <a
+          href="https://docs.joyent.com/private-cloud/packages"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Read the docs
+        </a>
+      </Description>
     ) : null}
     {!loading && expanded ? (
       <ReduxForm
diff --git a/packages/my-joy-beta/src/containers/create-instance/tags.js b/packages/my-joy-beta/src/containers/create-instance/tags.js
index c635f82e..8bee23d5 100644
--- a/packages/my-joy-beta/src/containers/create-instance/tags.js
+++ b/packages/my-joy-beta/src/containers/create-instance/tags.js
@@ -12,6 +12,7 @@ import { TagsIcon, P, Button, H3, TagList } from 'joyent-ui-toolkit';
 import Title from '@components/create-instance/title';
 import Tag from '@components/instances/tags';
 import KeyValue from '@components/instances/key-value';
+import Description from '@components/create-instance/description';
 
 const FORM_NAME_CREATE = 'CREATE-INSTANCE-TAGS-ADD';
 const FORM_NAME_EDIT = i => `CREATE-INSTANCE-TAGS-EDIT-${i}`;
@@ -33,18 +34,16 @@ export const Tags = ({
   <Fragment>
     <Title icon={<TagsIcon />}>Tags</Title>
     {expanded ? (
-      <Margin bottom={3}>
-        <P>
-          Tags can be used to identify your instances, group multiple instances
-          together, define firewall and affinity rules, and more.{' '}
-          <a
-            target="__blank"
-            href="https://docs.joyent.com/public-cloud/tags-metadata/tags"
-          >
-            Read the docs
-          </a>
-        </P>
-      </Margin>
+      <Description>
+        Tags can be used to identify your instances, group multiple instances
+        together, define firewall and affinity rules, and more.{' '}
+        <a
+          target="__blank"
+          href="https://docs.joyent.com/public-cloud/tags-metadata/tags"
+        >
+          Read the docs
+        </a>
+      </Description>
     ) : null}
     {proceeded ? (
       <Margin bottom={4}>