Optically center layouts @ new 3xl breakpoint

src/app/layout.tsx

@@ -87,6 +87,10 @@ export default function RootLayout({
               <main className={clsx(
                 'mx-3 mb-3',
                 'lg:mx-6 lg:mb-6',
+                '3xl:mx-auto',
+                '3xl:w-[1280px]',
+                // Offset defined in components/SiteGrid.tsx
+                '3xl:translate-x-[163px]',
               )}>
                 <Nav siteDomainOrTitle={SITE_DOMAIN_OR_TITLE} />
                 <AdminBatchEditPanel />

src/components/SiteGrid.tsx

@@ -2,11 +2,14 @@ import { clsx } from 'clsx/lite';
 import { RefObject } from 'react';
 
 /*
-  Max widths (lg and up)
+  Max widths
   Main: 954px +
   Sidebar: 302px +
   Gap: 24px =
-  Total: 1280px
+  Total: 1280px (7xl)
+  -
+  Used for main content offset (app/layout.tsx)
+  Column offset: (302px + 24px) / 2 = 163px
 */
 
 export default function SiteGrid({

tailwind.config.js

@@ -9,6 +9,7 @@ module.exports = {
   theme: {
     screens: {
       'xs': '390px',
+      '3xl': '1640px',
       ...defaultTheme.screens,
     },
     fontSize: {