1 files changed, 40 insertions, 19 deletions

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index f714f3c..517b9ce 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -6,7 +6,7 @@ CUSTOM PROPERTIES
 =============================================================================
 */
 :root {
-  /* Named palette */
+  /* Palette */
   --black: light-dark(#575279, #393b44);
   --red: light-dark(#b4637a, #c94f6d);
   --green: light-dark(#618774, #81b29a);
@@ -17,7 +17,7 @@ CUSTOM PROPERTIES
   --white: light-dark(#e5e9f0, #dfdfe0);
   --orange: light-dark(#d7827e, #f4a261);
   --pink: light-dark(#d685af, #d67ad2);
-  /* Dim palette */
+
   --dim-black: light-dark(#504c6b, #30323a);
   --dim-red: light-dark(#a5576d, #ab435d);
   --dim-green: light-dark(#597668, #6e9783);
@@ -27,7 +27,7 @@ CUSTOM PROPERTIES
   --dim-cyan: light-dark(#50848c, #54aeb0);
   --dim-white: light-dark(#c8cfde, #bebebe);
   --dim-foreground: light-dark(#4c4769, #aeafb0);
-  /* Bright palette */
+
   --bright-black: light-dark(#5f5695, #575860);
   --bright-red: light-dark(#c26d85, #d16983);
   --bright-green: light-dark(#629f81, #8ebaa4);
@@ -37,14 +37,10 @@ CUSTOM PROPERTIES
   --bright-cyan: light-dark(#5ca7b4, #7ad5d6);
   --bright-white: light-dark(#e6ebf3, #e4e4e5);
   --bright-foreground: light-dark(#625c87, #d6d6d7);
-  /* Semantic */
+
   --foreground: light-dark(#575279, #cdcecf);
   --background: light-dark(#faf4ed, #192330);
-  /* Layout */
-  --measure: 60ch;
-  --column-min-width: calc(1/3 * 100vw);
-  --column-max-width: 100%;
-  /* Gradient border — reused in header, footer */
+
   --gradient-border: linear-gradient(
     to right,
     var(--foreground),
@@ -52,6 +48,19 @@ CUSTOM PROPERTIES
     var(--foreground)
   );
 
+  /* Layout */
+  --measure: 60ch;
+  --column-min-width: calc(1/3 * 100vw);
+  --column-max-width: 100%;
+
+  --breakout-xxs: 2rem;
+  --breakout-xs: 4rem;
+  --breakout-sm: 8rem;
+  --breakout-md: 12rem;
+  --breakout-lg: 16rem;
+  --breakout-xl: 24rem;
+  --breakout-xxl: 32rem;
+
   /* Responsive layout */
   @media (min-width: 500px) {
     --column-max-width: var(--measure);
@@ -693,29 +702,39 @@ img {
     width: 75%;
   }
 
+  &.breakout-xxs {
+    width: calc(100% + 2 * var(--breakout-xxs));
+    transform: translateX(calc(-1 * var(--breakout-xxs)));
+  }
+
   &.breakout-xs {
-    width: calc(100% + 16rem);
-    transform: translateX(-8rem);
+    width: calc(100% + 2 * var(--breakout-xs));
+    transform: translateX(calc(-1 * var(--breakout-xs)));
   }
 
   &.breakout-sm {
-    width: calc(100% + 24rem);
-    transform: translateX(-12rem);
+    width: calc(100% + 2 * var(--breakout-sm));
+    transform: translateX(calc(-1 * var(--breakout-sm)));
   }
 
   &.breakout-md {
-    width: calc(100% + 32rem);
-    transform: translateX(-16rem);
+    width: calc(100% + 2 * var(--breakout-md));
+    transform: translateX(calc(-1 * var(--breakout-md)));
   }
 
   &.breakout-lg {
-    width: calc(100% + 48rem);
-    transform: translateX(-24rem);
+    width: calc(100% + 2 * var(--breakout-lg));
+    transform: translateX(calc(-1 * var(--breakout-lg)));
   }
 
   &.breakout-xl {
-    width: calc(100% + 64rem);
-    transform: translateX(-32rem);
+    width: calc(100% + 2 * var(--breakout-xl));
+    transform: translateX(calc(-1 * var(--breakout-xl)));
+  }
+
+  &.breakout-xxl {
+    width: calc(100% + 2 * var(--breakout-xxl));
+    transform: translateX(calc(-1 * var(--breakout-xxl)));
   }
 
   &.breakout-full {
@@ -723,11 +742,13 @@ img {
     margin-left: calc(50% - 50vw);
   }
 
+  &.breakout-xxs,
   &.breakout-xs,
   &.breakout-sm,
   &.breakout-md,
   &.breakout-lg,
   &.breakout-xl,
+  &.breakout-xxl,
   &.breakout-full {
     max-width: 100vw;
   }