apply max to body

app/assets/stylesheets/merged/merged.css

@@ -1769,6 +1769,10 @@ select {
   max-width: 28rem;
 }
 
+.max-w-screen-2xl {
+  max-width: 1536px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1945,6 +1949,10 @@ select {
   gap: 3rem;
 }
 
+.gap-20 {
+  gap: 5rem;
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -3066,8 +3074,24 @@ select {
 }
 
 @media (min-width: 1280px) {
+  .xl\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .xl\:columns-4 {
     -moz-columns: 4;
          columns: 4;
   }
+
+  .xl\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1536px) {
+  .\32xl\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }

app/views/layouts/merged/application.haml

@@ -12,7 +12,7 @@
     - if false
       %script{:src => "https://cdn.tailwindcss.com"}
 
-  %body
+  %body.max-w-screen-2xl.2xl:mx-auto
     = render "layouts/merged/header"
     = render "layouts/merged/messages"
     = yield