changes

app/assets/styles/main.scss

@@ -5,6 +5,14 @@
   font-size: 15px;
 }
 
+#__nuxt {
+  // like Bulma's .container
+  max-width: 1900px;
+  margin: 0 auto;
+  position: relative;
+  width: 100%;
+}
+
 // Tooltip Styles
 .tooltiptext {
   opacity: 0;
@@ -22,20 +30,9 @@
   box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
 }
 
-.to-left {
-  right: 30px;
-}
-
-@mixin tooltipshow() {
+.control:hover .tooltiptext {
   opacity: 1;
   position: absolute;
   min-width: 300px;
   z-index: 999;
 }
-
-.control:hover .tooltiptext {
-  @include tooltipshow();
-}
-.control:hover .tooltiptext .to-left {
-  @include tooltipshow();
-}

app/assets/styles/utils.scss

@@ -109,6 +109,9 @@
   --container-5xl: 64rem;
   --container-6xl: 72rem;
   --container-7xl: 80rem;
+  --container-8xl: 88rem;
+  --container-9xl: 96rem;
+  --container-10xl: 104rem;
 }
 
 // ─── Shared mixin ──────────────────────────────────────────────────────────
@@ -260,7 +263,24 @@ $fractions: (
 }
 
 // ─── Container sizes (w- only) ─────────────────────────────────────────────
-$containers: ("3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl");
+$containers: (
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl",
+  "8xl",
+  "9xl",
+  "10xl"
+);
 
 @each $name in $containers {
   .w-#{$name} {