grid column

css/modules/_layout.scss

@@ -1,13 +1,18 @@
 $width: 176mm;
 $height: 240mm;
-$top: 6mm;
-$bottom: 20mm;
-$inside: 12mm;
-$outside: 6mm;
+$top: 10mm;
+$bottom: 14mm;
+$inside: 20mm;
+$outside: 14mm;
 $content-h: calc($height - $top - $bottom - 1mm);
 $content-w: calc($width - $inside - $outside);
 $gap: 4mm;
 $indent: 10mm;
+$unit: calc($content-w/7);
+
+:root{
+    --unit: #{$unit};
+}
 
 
 @media print {
@@ -23,9 +28,7 @@ $indent: 10mm;
         margin-left: $outside;
         margin-right: $inside;
 
-        // background-image: url("/images/layout-2_3.png");
-        // background-size: 100% 100%;
-     
+        
 
         @bottom-left {
             content: counter(page);
@@ -46,6 +49,10 @@ $indent: 10mm;
         margin-left: $inside;
         margin-right: $outside;
 
+        background-image: url("/images/layout-1_20.png");
+        background-size: 100% 100%;
+     
+
         @bottom-left {
             content: string(chapterCount);
               font-family: var(--font-sans);
@@ -141,11 +148,11 @@ $indent: 10mm;
 }
 
 
-#section__content{
-    columns: 2;
-    column-gap: $gap;
-    column-fill: auto;
-}
+// #section__content{
+//     columns: 2;
+//     column-gap: $gap;
+//     column-fill: auto;
+// }
 
 
 // Title chapter

css/modules/_num-paragraph.scss

@@ -4,18 +4,12 @@
 
 ol[type="1"]{
     list-style-type: none; 
-    position: relative; 
     break-after: avoid;
-    width: $indent;
     position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
+    left: calc(var(--unit)*2);
       &::after{
         content: attr(start);
         display: block;
-        position: absolute;
         font-size: var(--fs-small); 
         opacity: 0.5;
     }

css/modules/_text.scss

@@ -22,8 +22,13 @@ p{
     text-align: justify;
     orphans: 2;
     widows: 2;
-    margin-left: $indent;
+
+    position: relative;
+    top: -2px;
+    // margin-left: $indent;
     // padding-left: $indent*0.2;
+
+    padding-left: calc(var(--unit)*3);
 }
 
 p, li{