adjusted layout variables

Author: Se-Gl

samples/index.html

@@ -177,11 +177,9 @@ <h3 class="text-30 font-bold text-gray">Test title</h3>
     </div> -->
     <div class="h-75vh"></div>
 
-    <div class="grid grid-col-2 place-content-center min-h-50vh gap-20px">
-      <div class="bg-purple">first</div>
-      <div class="bg-purple-3">second</div>
-      <div class="bg-purple-6">third</div>
-    </div>
+    <img
+      class="object-none object-position-top h-20rem w-100per rounded-10px"
+      src="https://omencss.com/images/blog/blogcontent/Hero-Image.webp" />
 
     <script type="module">
       import { isInView, lazy } from '../js/omenJS.js'

scss/abstracts/variables/layout/_variables.scss

@@ -18,6 +18,7 @@ $layoutVariables: (
       break-after-auto: auto,
       break-after-avoid: avoid,
       break-after-all: all,
+      break-after-always: always,
       break-after-avoid-page: avoid-page,
       break-after-page: page,
       break-after-left: left,
@@ -30,6 +31,7 @@ $layoutVariables: (
       break-before-auto: auto,
       break-before-avoid: avoid,
       break-before-all: all,
+      break-before-always: always,
       break-before-avoid-page: avoid-page,
       break-before-page: page,
       break-before-left: left,
@@ -53,8 +55,8 @@ $layoutVariables: (
   ),
   'box-sizing': (
     'values': (
-      box-border: border-box,
-      box-content: content-box
+      box-sizing-border: border-box,
+      box-sizing-content: content-box
     )
   ),
   'float': (
@@ -180,7 +182,8 @@ $layoutVariables: (
   'visibility': (
     'values': (
       visible: visible,
-      hidden: hidden
+      hidden: hidden,
+      collapse: collapse
     )
   ),
   'z-index': (

scss/base/_reset.scss

@@ -184,6 +184,11 @@ h6 {
 }
 
 // remove outline
+button {
+  all: unset;
+  cursor: pointer;
+}
+
 a:focus,
 button:focus,
 input:focus,