style: update breakpoints

css/pico.classless.css

@@ -435,6 +435,11 @@ progress,
     --pico-font-size: 125%;
   }
 }
+@media (min-width: 1536px) {
+  :root {
+    --pico-font-size: 131.25%;
+  }
+}
 
 @media (min-width: 576px) {
   body > header,
@@ -468,6 +473,14 @@ progress,
     --pico-block-spacing-vertical: calc(var(--pico-spacing) * 4);
   }
 }
+@media (min-width: 1536px) {
+  body > header,
+  body > main,
+  body > footer,
+  section {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 4.5);
+  }
+}
 
 @media (min-width: 576px) {
   article {
@@ -489,6 +502,11 @@ progress,
     --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2);
   }
 }
+@media (min-width: 1536px) {
+  article {
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2.25);
+  }
+}
 
 dialog > article {
   --pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
@@ -691,6 +709,13 @@ body > footer {
     max-width: 1200px;
   }
 }
+@media (min-width: 1536px) {
+  body > header,
+  body > main,
+  body > footer {
+    max-width: 1450px;
+  }
+}
 
 /**
  * Section

css/pico.css

@@ -437,6 +437,11 @@ progress,
     --pico-font-size: 125%;
   }
 }
+@media (min-width: 1536px) {
+  :root {
+    --pico-font-size: 131.25%;
+  }
+}
 
 @media (min-width: 576px) {
   body > header,
@@ -470,6 +475,14 @@ progress,
     --pico-block-spacing-vertical: calc(var(--pico-spacing) * 4);
   }
 }
+@media (min-width: 1536px) {
+  body > header,
+  body > main,
+  body > footer,
+  section {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 4.5);
+  }
+}
 
 @media (min-width: 576px) {
   article {
@@ -491,6 +504,11 @@ progress,
     --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2);
   }
 }
+@media (min-width: 1536px) {
+  article {
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2.25);
+  }
+}
 
 dialog > article {
   --pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
@@ -695,6 +713,11 @@ body > footer {
     max-width: 1200px;
   }
 }
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1450px;
+  }
+}
 
 /**
  * Section

css/pico.fluid.classless.css

@@ -435,6 +435,11 @@ progress,
     --pico-font-size: 125%;
   }
 }
+@media (min-width: 1536px) {
+  :root {
+    --pico-font-size: 131.25%;
+  }
+}
 
 @media (min-width: 576px) {
   body > header,
@@ -468,6 +473,14 @@ progress,
     --pico-block-spacing-vertical: calc(var(--pico-spacing) * 4);
   }
 }
+@media (min-width: 1536px) {
+  body > header,
+  body > main,
+  body > footer,
+  section {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 4.5);
+  }
+}
 
 @media (min-width: 576px) {
   article {
@@ -489,6 +502,11 @@ progress,
     --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2);
   }
 }
+@media (min-width: 1536px) {
+  article {
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2.25);
+  }
+}
 
 dialog > article {
   --pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);

scss/_settings.scss

@@ -57,7 +57,7 @@ $breakpoints: map.deep-merge(
         root-font-size: 112.5%,
       ),
 
-    // Large (desktops)
+    // Large
     // Font size: 19px
     lg:
       (
@@ -66,13 +66,22 @@ $breakpoints: map.deep-merge(
         root-font-size: 118.75%,
       ),
 
-    // Extra large (large desktops)
+    // Extra large
     // Font size: 20px
     xl:
       (
         breakpoint: 1280px,
         viewport: 1200px,
         root-font-size: 125%,
+      ),
+
+    // Extra extra large
+    // Font size: 21px
+    xxl:
+      (
+        breakpoint: 1536px,
+        viewport: 1450px,
+        root-font-size: 131.25%,
       )
   ),
   $breakpoints

scss/themes/default/_styles.scss

@@ -94,7 +94,7 @@
         @each $key, $values in $breakpoints {
           @if $values {
             @media (min-width: map.get($values, "breakpoint")) {
-              $multiplier: 1;
+              $multiplier: 2;
               @if $key == "sm" {
                 $multiplier: 2.5;
               } @else if $key == "md" {
@@ -103,6 +103,8 @@
                 $multiplier: 3.5;
               } @else if $key == "xl" {
                 $multiplier: 4;
+              } @else if $key == "xxl" {
+                $multiplier: 4.5;
               }
 
               #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * $multiplier);
@@ -127,6 +129,8 @@
                 $multiplier: 1.75;
               } @else if $key == "xl" {
                 $multiplier: 2;
+              } @else if $key == "xxl" {
+                $multiplier: 2.25;
               }
 
               #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * $multiplier);