diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
index 81071c44..ef7a5794 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
@@ -1622,7 +1622,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
     name="td"
     selected={undefined}
   >
-    5 months
+    6 months
   </td>
   <td
     className="c10"
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
index 7d8b0f06..12c14724 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -1247,7 +1247,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -1509,7 +1509,7 @@ exports[`renders <Summary /> without throwing 1`] = `
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c40 c28 c29 c30"
@@ -1544,7 +1544,7 @@ exports[`renders <Summary /> without throwing 1`] = `
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c41 c28 c29 c30"
@@ -2857,7 +2857,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -3121,7 +3121,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c39 c28 c29 c30"
@@ -3156,7 +3156,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c40 c28 c29 c30"
@@ -4784,7 +4784,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -5048,7 +5048,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c39 c28 c29 c30"
@@ -5083,7 +5083,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c40 c28 c29 c30"
@@ -6992,7 +6992,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -7261,7 +7261,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c43 c28 c29 c30"
@@ -7306,7 +7306,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c44 c28 c29 c30"
@@ -8705,7 +8705,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -8967,7 +8967,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c39 c28 c29 c30"
@@ -9002,7 +9002,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c40 c28 c29 c30"
@@ -10394,7 +10394,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -10656,7 +10656,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c39 c28 c29 c30"
@@ -10691,7 +10691,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c40 c28 c29 c30"
@@ -12245,7 +12245,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   }
 }
 
-@media (max-width:47.9375rem) {
+@media (max-width:37.4375rem) {
   .c17 {
     display: none;
   }
@@ -12507,7 +12507,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
               >
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (max-width: 47.9375rem)"
+                  query="only screen and (max-width: 37.4375rem)"
                 >
                   <button
                     className="c40 c28 c29 c30"
@@ -12542,7 +12542,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
                 </span>
                 <span
                   name="react-responsive-mock"
-                  query="only screen and (min-width: 48rem)"
+                  query="only screen and (min-width: 37.5rem)"
                 >
                   <button
                     className="c41 c28 c29 c30"
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
index 966eab49..811f29c3 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -71,7 +71,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -114,10 +114,24 @@ exports[`renders <Summary /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -233,7 +247,7 @@ exports[`renders <Summary loading /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -276,10 +290,24 @@ exports[`renders <Summary loading /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -344,7 +372,7 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -403,10 +431,24 @@ exports[`renders <Summary loadingError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -512,7 +554,7 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -592,10 +634,24 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -732,7 +788,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -775,10 +831,24 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -1515,7 +1585,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -1860,14 +1930,28 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
   .c19 {
     display: none;
   }
@@ -2134,7 +2218,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
                 >
                   <span
                     name="react-responsive-mock"
-                    query="only screen and (max-width: 47.9375rem)"
+                    query="only screen and (max-width: 37.4375rem)"
                   >
                     <button
                       className="c41 c30 c31 c32"
@@ -2169,7 +2253,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
                   </span>
                   <span
                     name="react-responsive-mock"
-                    query="only screen and (min-width: 48rem)"
+                    query="only screen and (min-width: 37.5rem)"
                   >
                     <button
                       className="c42 c30 c31 c32"
@@ -3483,7 +3567,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -3828,14 +3912,28 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 
-@media (max-width:47.9375rem) {
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+@media (max-width:37.4375rem) {
   .c19 {
     display: none;
   }
@@ -4102,7 +4200,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
                 >
                   <span
                     name="react-responsive-mock"
-                    query="only screen and (max-width: 47.9375rem)"
+                    query="only screen and (max-width: 37.4375rem)"
                   >
                     <button
                       className="c41 c30 c31 c32"
@@ -4137,7 +4235,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
                   </span>
                   <span
                     name="react-responsive-mock"
-                    query="only screen and (min-width: 48rem)"
+                    query="only screen and (min-width: 37.5rem)"
                   >
                     <button
                       className="c42 c30 c31 c32"
diff --git a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
index 100b112c..e0fb7f61 100644
--- a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
@@ -91,7 +91,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
 .c4 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 .c0 {
@@ -125,10 +125,24 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c4 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c4 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c4 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
index aa677f79..4d4bc9cb 100644
--- a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
+++ b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
@@ -74,7 +74,6 @@ exports[`Form Checkbox 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
@@ -485,7 +484,6 @@ exports[`Form Radio 1`] = `
   height: 1.125rem;
   box-sizing: border-box;
   top: 0;
-  right: 0;
   cursor: pointer;
   background-color: rgb(255,255,255);
   box-shadow: none;
diff --git a/packages/ui-toolkit/src/layout/__tests__/__snapshots__/layout.spec.js.snap b/packages/ui-toolkit/src/layout/__tests__/__snapshots__/layout.spec.js.snap
index 37ad322f..0da9a254 100644
--- a/packages/ui-toolkit/src/layout/__tests__/__snapshots__/layout.spec.js.snap
+++ b/packages/ui-toolkit/src/layout/__tests__/__snapshots__/layout.spec.js.snap
@@ -30,7 +30,7 @@ exports[`Layout ViewContainer 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
 }
 
 @media only screen and (min-width:48em) {
@@ -51,10 +51,24 @@ exports[`Layout ViewContainer 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -72,7 +86,7 @@ exports[`Layout ViewContainer center 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -114,10 +128,24 @@ exports[`Layout ViewContainer center 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
@@ -155,7 +183,7 @@ exports[`Layout ViewContainer main 1`] = `
 .c0 {
   box-sizing: border-box;
   width: 100%;
-  max-width: 62.5rem;
+  max-width: 78.75rem;
   padding-bottom: 1.125rem;
 }
 
@@ -177,10 +205,24 @@ exports[`Layout ViewContainer main 1`] = `
   }
 }
 
-@media only screen and (max-width:47.9375rem) {
+@media only screen and (max-width:37.4375rem) {
   .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
   }
 }
 
diff --git a/packages/ui-toolkit/src/layout/__tests__/layout.spec.js b/packages/ui-toolkit/src/layout/__tests__/layout.spec.js
index 1cc6594d..c2f867d4 100644
--- a/packages/ui-toolkit/src/layout/__tests__/layout.spec.js
+++ b/packages/ui-toolkit/src/layout/__tests__/layout.spec.js
@@ -32,7 +32,7 @@ describe('Layout', () => {
       .toJSON();
 
     expect(tree).toMatchSnapshot();
-    expect(tree).toHaveStyleRule('max-width', remcalc(1000));
+    expect(tree).toHaveStyleRule('max-width', remcalc(1260));
   });
 
   test('ViewContainer fluid', () => {