diff --git a/.prettierrc b/.prettierrc
index c63064f..4db6238 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,7 @@
 {
   "singleQuote": false,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-css-order"],
+  "cssDeclarationSorterKeepOverrides": true,
+  "cssDeclarationSorterOrder": "smacss"
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f62af99..4a729b9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,5 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  "prettier.configPath": "./.prettierrc"
 }
diff --git a/dist/expanded/luxa.css b/dist/expanded/luxa.css
index 214d0c5..956a5c3 100644
--- a/dist/expanded/luxa.css
+++ b/dist/expanded/luxa.css
@@ -205,88 +205,88 @@ img {
 }
 
 hr {
+  display: block;
   width: 100%;
   height: 0.125em;
   margin: 0;
   padding: 0;
-  display: block;
   border: none;
 }
 
 .container-50 {
   width: 50%;
-  max-width: 60rem;
   min-width: 10rem;
+  max-width: 60rem;
   margin: 0 auto;
 }
 .container-55 {
   width: 55%;
-  max-width: 66rem;
   min-width: 11rem;
+  max-width: 66rem;
   margin: 0 auto;
 }
 .container-60 {
   width: 60%;
-  max-width: 72rem;
   min-width: 12rem;
+  max-width: 72rem;
   margin: 0 auto;
 }
 .container-65 {
   width: 65%;
-  max-width: 78rem;
   min-width: 13rem;
+  max-width: 78rem;
   margin: 0 auto;
 }
 .container-70 {
   width: 70%;
-  max-width: 84rem;
   min-width: 14rem;
+  max-width: 84rem;
   margin: 0 auto;
 }
 .container-75 {
   width: 75%;
-  max-width: 90rem;
   min-width: 15rem;
+  max-width: 90rem;
   margin: 0 auto;
 }
 .container-80 {
   width: 80%;
-  max-width: 96rem;
   min-width: 16rem;
+  max-width: 96rem;
   margin: 0 auto;
 }
 .container-85 {
   width: 85%;
-  max-width: 102rem;
   min-width: 17rem;
+  max-width: 102rem;
   margin: 0 auto;
 }
 .container-90 {
   width: 90%;
-  max-width: 108rem;
   min-width: 18rem;
+  max-width: 108rem;
   margin: 0 auto;
 }
 .container-95 {
   width: 95%;
-  max-width: 114rem;
   min-width: 19rem;
+  max-width: 114rem;
   margin: 0 auto;
 }
 .container-100 {
   width: 100%;
-  max-width: 120rem;
   min-width: 20rem;
+  max-width: 120rem;
   margin: 0 auto;
 }
 
 .row {
-  width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
+  width: 100%;
   gap: var(--gap);
 }
 .row.is-gapless {
@@ -295,57 +295,57 @@ hr {
 
 .col {
   display: block;
-  flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
+  flex-basis: 0;
 }
 .col.is-1 {
-  width: 8.3333333333%;
   flex: none;
+  width: 8.3333333333%;
 }
 .col.is-2 {
-  width: 16.6666666667%;
   flex: none;
+  width: 16.6666666667%;
 }
 .col.is-3 {
-  width: 25%;
   flex: none;
+  width: 25%;
 }
 .col.is-4 {
-  width: 33.3333333333%;
   flex: none;
+  width: 33.3333333333%;
 }
 .col.is-5 {
-  width: 41.6666666667%;
   flex: none;
+  width: 41.6666666667%;
 }
 .col.is-6 {
-  width: 50%;
   flex: none;
+  width: 50%;
 }
 .col.is-7 {
-  width: 58.3333333333%;
   flex: none;
+  width: 58.3333333333%;
 }
 .col.is-8 {
-  width: 66.6666666667%;
   flex: none;
+  width: 66.6666666667%;
 }
 .col.is-9 {
-  width: 75%;
   flex: none;
+  width: 75%;
 }
 .col.is-10 {
-  width: 83.3333333333%;
   flex: none;
+  width: 83.3333333333%;
 }
 .col.is-11 {
-  width: 91.6666666667%;
   flex: none;
+  width: 91.6666666667%;
 }
 .col.is-12 {
-  width: 100%;
   flex: none;
+  width: 100%;
 }
 
 @media screen and (max-width: 64rem) {
@@ -477,16 +477,16 @@ hr {
 }
 
 .sr-only {
-  opacity: 0;
+  position: absolute;
   width: 0;
   height: 0;
   margin: 0;
   padding: 0;
-  position: absolute;
   overflow: hidden;
+  opacity: 0;
   clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
   border: none;
+  white-space: nowrap;
 }
 
 @media screen and (max-width: 64rem) {
diff --git a/docs/recipes/badge.mdx b/docs/recipes/badge.mdx
index 211ef5c..e06819f 100644
--- a/docs/recipes/badge.mdx
+++ b/docs/recipes/badge.mdx
@@ -17,17 +17,17 @@ Badges can indicate notifications, item counts, or other information related to
 
 ```scss
 .badge {
-  padding: 0.5em 0.75em;
   display: inline-flex;
   align-items: center;
+  padding: 0.5em 0.75em;
   gap: 0.5em;
   border: 0.0625rem solid var(--neutral-03);
   border-radius: var(--rounded-sm);
-  line-height: 1;
-  font-size: 1em;
-  font-weight: 500;
-  color: var(--neutral-09);
   background-color: var(--neutral-01);
+  color: var(--neutral-09);
+  font-weight: 500;
+  font-size: 1em;
+  line-height: 1;
   transition: border-color 240ms var(--fluid);
 
   .status {
diff --git a/docs/src/components/ad/index.scss b/docs/src/components/ad/index.scss
index 25af121..4b2e4e7 100644
--- a/docs/src/components/ad/index.scss
+++ b/docs/src/components/ad/index.scss
@@ -1,16 +1,16 @@
 .ad {
-  width: calc(10rem + 0.5rem) !important;
   position: absolute;
   top: 0;
   left: calc(100% + var(--space-04));
+  width: calc(10rem + 0.5rem) !important;
 
   #carbonads {
     #carbon-responsive {
       a {
+        color: inherit !important;
+        font-size: 0.75rem !important;
         line-height: 1.8 !important;
         font-family: var(--font-inter) !important;
-        font-size: 0.75rem !important;
-        color: inherit !important;
       }
 
       .carbon-responsive-wrap {
@@ -20,13 +20,13 @@
         gap: 0.5rem !important;
         border: 0.0625rem solid var(--neutral-04) !important;
         border-radius: var(--rounded-sm) !important;
-        text-wrap: balance !important;
         background-color: var(--neutral-01) !important;
+        text-wrap: balance !important;
         transition: border-color 240ms var(--fluid) !important;
 
         .carbon-img {
-          width: 100% !important;
           flex: none !important;
+          width: 100% !important;
 
           img {
             width: 100% !important;
diff --git a/docs/src/components/docs/aside/index.scss b/docs/src/components/docs/aside/index.scss
index f3c76a7..d6d2c1b 100644
--- a/docs/src/components/docs/aside/index.scss
+++ b/docs/src/components/docs/aside/index.scss
@@ -1,62 +1,84 @@
 aside {
-  width: 12rem;
+  display: flex;
   position: absolute;
-  transform: translateX(-100%);
   top: 0;
   left: calc(-1 * var(--space-04));
-  display: flex;
   flex-direction: column;
+  width: 12rem;
   gap: var(--space-02);
-  transition: border-color 240ms var(--fluid);
+  transform: translateX(-100%);
+  transition: all 240ms var(--fluid);
+  will-change: transform, border-color;
 
   nav {
     width: 100%;
     padding: var(--space-02) var(--space-01) var(--space-02) var(--space-02);
     border: 0.0625rem solid var(--neutral-04);
     border-radius: var(--rounded-sm);
+    transition: border-color 240ms var(--fluid);
   }
 
   ul {
-    --gap: 0.5em;
-    list-style: none;
+    --gap: 0;
     width: 100%;
     margin: 0;
     padding: 0;
+    list-style: none;
+
+    li {
+      &:first-child {
+        a {
+          padding-top: 0;
+        }
+      }
+
+      &:last-child {
+        a {
+          padding-bottom: 0;
+        }
+      }
+    }
 
     a {
+      display: flex;
+      position: relative;
+      align-items: center;
+      padding: 0.25rem 0;
       gap: 0.5rem;
-      text-decoration: none;
-      font-weight: 500;
       color: var(--neutral-09);
-      transition: color 140ms var(--fluid);
+      font-weight: 500;
+      text-decoration: none;
+      transition:
+        color 200ms var(--fluid),
+        transform 200ms var(--fluid);
 
       &::before {
-        content: "";
-        opacity: 0;
-        width: 0;
-        height: 0;
-        position: relative;
-        transform: translateX(-100%);
         display: block;
+        position: absolute;
+        left: -0.75rem;
+        width: 0.25rem;
+        height: 0.25rem;
+        transform: scale(0);
         border-radius: 100%;
         background-color: var(--neutral-11);
-        transition:
-          transform,
-          opacity 240ms var(--fluid);
+        content: "";
+        opacity: 0;
+        transition: all 200ms var(--fluid);
+        will-change: transform, opacity;
       }
 
       &:hover {
+        transform: translateX(0.25rem);
         color: var(--neutral-11);
       }
 
       &.is-active {
+        transform: translateX(0.625rem);
         color: var(--neutral-11);
 
         &::before {
+          transform: scale(1);
           opacity: 1;
-          width: 0.25rem;
-          height: 0.25rem;
-          transform: translateX(-50%);
         }
       }
     }
@@ -64,14 +86,16 @@ aside {
 
   &:focus-within,
   &:hover {
-    border-color: var(--neutral-05);
+    nav {
+      border-color: var(--neutral-05);
+    }
   }
 
   @media (max-width: 64rem) {
-    width: 100%;
     position: relative;
-    transform: none;
     top: unset;
     left: unset;
+    width: 100%;
+    transform: none;
   }
 }
diff --git a/docs/src/components/header/index.scss b/docs/src/components/header/index.scss
index b310f86..1bb27a3 100644
--- a/docs/src/components/header/index.scss
+++ b/docs/src/components/header/index.scss
@@ -2,34 +2,34 @@ header {
   width: 100%;
 
   ul {
-    list-style: none;
+    display: flex;
     width: 100%;
     margin: 0;
     padding: 0;
-    display: flex;
     gap: var(--space-03);
+    list-style: none;
 
     a {
-      position: relative;
       display: flex;
+      position: relative;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       outline-offset: 0.375rem;
-      text-decoration: none;
-      font-weight: 500;
       color: var(--neutral-09);
+      font-weight: 500;
+      text-decoration: none;
       transition: color 140ms var(--fluid);
 
       &::before {
-        content: "";
-        opacity: 0;
+        display: block;
+        position: relative;
         width: 0.25rem;
         height: 0.25rem;
-        position: relative;
-        display: block;
         border-radius: 100%;
         background-color: var(--neutral-11);
+        content: "";
+        opacity: 0;
         transition:
           transform,
           opacity 240ms var(--fluid);
diff --git a/docs/src/components/mdx-components/blockquote/index.scss b/docs/src/components/mdx-components/blockquote/index.scss
index c690827..ee1c861 100644
--- a/docs/src/components/mdx-components/blockquote/index.scss
+++ b/docs/src/components/mdx-components/blockquote/index.scss
@@ -1,27 +1,27 @@
 .blockquote {
+  position: relative;
   width: 100%;
   margin: var(--space-01) 0 0 0;
   padding: var(--space-01) var(--space-02);
-  position: relative;
   border: 0.0625rem solid var(--neutral-04);
   border-radius: var(--rounded-sm);
   background-color: var(--neutral-02);
   transition: border-color 240ms var(--fluid);
 
   .icon {
-    width: 1.625rem;
-    height: 1.625rem;
+    display: flex;
     position: absolute;
-    transform: translate(-50%, -50%);
     top: 0;
     left: 0;
-    display: flex;
     align-items: center;
     justify-content: center;
+    width: 1.625rem;
+    height: 1.625rem;
+    transform: translate(-50%, -50%);
     border: 0.0625rem solid var(--neutral-04);
     border-radius: 100%;
-    font-size: 1em;
     background-color: var(--neutral-02);
+    font-size: 1em;
     transition: border-color 240ms var(--fluid);
   }
 
diff --git a/docs/src/components/mdx-components/code-block/index.scss b/docs/src/components/mdx-components/code-block/index.scss
index 3a37757..908f78b 100644
--- a/docs/src/components/mdx-components/code-block/index.scss
+++ b/docs/src/components/mdx-components/code-block/index.scss
@@ -1,13 +1,13 @@
 .code-block {
+  position: relative;
   width: 100%;
   margin: 0.5em 0;
-  position: relative;
 
   pre {
+    position: relative;
     width: 100%;
     margin: 0;
     padding: 2em;
-    position: relative;
     overflow: auto hidden;
     border: 0.0625rem solid var(--neutral-04);
     background-color: var(--neutral-02);
@@ -16,11 +16,11 @@
     code {
       .token {
         &.comment {
-          text-transform: uppercase;
-          font-family: var(--font-shantell-sans);
-          font-size: 0.625rem;
-          font-style: italic;
           color: var(--neutral-07);
+          font-style: italic;
+          font-size: 0.625rem;
+          font-family: var(--font-shantell-sans);
+          text-transform: uppercase;
         }
 
         &.property {
diff --git a/docs/src/components/mdx-components/copy-button/index.scss b/docs/src/components/mdx-components/copy-button/index.scss
index 275986b..72ea03c 100644
--- a/docs/src/components/mdx-components/copy-button/index.scss
+++ b/docs/src/components/mdx-components/copy-button/index.scss
@@ -1,31 +1,31 @@
 .copy-button {
-  padding: 0.5em;
   position: absolute;
   top: 0.5em;
   right: 0.5em;
+  padding: 0.5em;
   border-radius: 0.1875rem;
-  font-weight: 500;
   background-color: transparent;
+  font-weight: 500;
   transition:
     border-color 0.24s var(--fluid),
     background-color 0.24s var(--fluid);
 
   .icon {
-    margin: 0;
     position: relative;
-    font-size: 1em;
+    margin: 0;
     color: inherit;
+    font-size: 1em;
 
     &-copy {
       transition: opacity 0.24s var(--elastic);
     }
 
     &-check {
-      opacity: 0;
       position: absolute;
-      transform: translate(-50%, -50%) scale(0);
       top: 50%;
       left: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      opacity: 0;
       transition:
         opacity 0.24s var(--fluid),
         transform 0.24s var(--elastic);
@@ -43,8 +43,8 @@
       }
 
       &-check {
-        opacity: 1;
         transform: translate(-50%, -50%) scale(1) rotate(-6deg);
+        opacity: 1;
       }
     }
   }
diff --git a/docs/src/components/recipes/badge/index.scss b/docs/src/components/recipes/badge/index.scss
index 045d375..a3367c9 100644
--- a/docs/src/components/recipes/badge/index.scss
+++ b/docs/src/components/recipes/badge/index.scss
@@ -1,15 +1,15 @@
 .badge {
-  padding: 0.5em 0.75em;
   display: inline-flex;
   align-items: center;
+  padding: 0.5em 0.75em;
   gap: 0.5em;
   border: 0.0625rem solid var(--neutral-04);
   border-radius: var(--rounded-sm);
-  line-height: 1;
-  font-size: 1em;
-  font-weight: 500;
-  color: var(--neutral-10);
   background-color: var(--neutral-02);
+  color: var(--neutral-10);
+  font-weight: 500;
+  font-size: 1em;
+  line-height: 1;
   transition: border-color 240ms var(--fluid);
 
   .status {
diff --git a/docs/src/components/table/index.scss b/docs/src/components/table/index.scss
index 264237e..a9ff76e 100644
--- a/docs/src/components/table/index.scss
+++ b/docs/src/components/table/index.scss
@@ -1,7 +1,7 @@
 .table {
+  position: relative;
   width: 100%;
   margin: 0.5em 0;
-  position: relative;
   overflow: auto hidden;
   border: 0.0625rem solid var(--neutral-05);
   border-radius: var(--rounded-sm);
@@ -32,8 +32,8 @@
 
       &:hover,
       &:focus-within {
-        background-color: var(--neutral-02);
         outline: none;
+        background-color: var(--neutral-02);
       }
     }
 
@@ -49,8 +49,8 @@
     }
 
     th {
-      font-weight: 600;
       background-color: var(--neutral-02);
+      font-weight: 600;
     }
   }
 }
diff --git a/docs/src/styles/globals.scss b/docs/src/styles/globals.scss
index bb7db77..ea1723e 100644
--- a/docs/src/styles/globals.scss
+++ b/docs/src/styles/globals.scss
@@ -1,29 +1,29 @@
 @use "../../../sass/luxa.scss";
 
 * {
+  outline-color: var(--neutral-04);
   outline-width: thin;
   outline-offset: 0.125rem;
-  outline-color: var(--neutral-04);
   font: inherit;
 }
 
 ::selection {
-  color: var(--neutral-10);
   background-color: var(--neutral-04);
   background-blend-mode: multiply;
+  color: var(--neutral-10);
 }
 
 body {
-  min-height: 100dvh;
-  padding: var(--space-04) var(--space-03) var(--space-06) var(--space-03);
-  position: relative;
   display: flex;
+  position: relative;
   flex-direction: column;
   align-items: center;
-  font-family: var(--font-inter);
-  font-size: 0.75rem;
-  color: var(--neutral-09);
+  min-height: 100dvh;
+  padding: var(--space-04) var(--space-03) var(--space-06) var(--space-03);
   background-color: var(--neutral-01);
+  color: var(--neutral-09);
+  font-size: 0.75rem;
+  font-family: var(--font-inter);
 }
 
 main {
@@ -50,12 +50,12 @@ hr {
 }
 
 a {
+  color: inherit;
+  font-weight: 500;
   text-decoration: underline;
+  text-decoration-color: var(--neutral-07);
   text-decoration-thickness: 0.0313rem;
   text-underline-offset: 0.125rem;
-  text-decoration-color: var(--neutral-07);
-  color: inherit;
-  font-weight: 500;
 
   &:has(> code) {
     text-underline-offset: 0.25rem;
@@ -74,13 +74,13 @@ h4,
 h5,
 h6,
 .title {
-  font-size: inherit;
-  font-weight: 600;
   color: inherit;
+  font-weight: 600;
+  font-size: inherit;
 
   &.primary {
-    font-weight: 900;
     color: var(--neutral-10);
+    font-weight: 900;
   }
 }
 
@@ -107,8 +107,8 @@ ul {
 }
 
 .icon {
-  font-size: 2em;
   color: inherit;
+  font-size: 2em;
 }
 
 .actions-group {
@@ -117,28 +117,28 @@ ul {
 }
 
 .action {
+  display: flex;
   appearance: none;
-  width: fit-content;
-  margin: 0;
-  padding: 0.75em 1em;
   position: relative;
-  display: flex;
   align-items: center;
   justify-content: center;
+  width: fit-content;
+  margin: 0;
+  padding: 0.75em 1em;
   gap: 0.5rem;
-  user-select: none;
-  cursor: pointer;
   border: 0.0625rem solid var(--neutral-04);
   border-radius: var(--rounded-sm);
-  line-height: 1;
-  text-decoration: none;
-  font-family: var(--font-general-sans);
-  font-size: inherit;
-  font-weight: 600;
-  color: var(--neutral-09);
   background-color: var(--neutral-01);
   box-shadow: var(--custom-box-shadow);
+  color: var(--neutral-09);
+  font-weight: 600;
+  font-size: inherit;
+  line-height: 1;
+  font-family: var(--font-general-sans);
+  text-decoration: none;
+  cursor: pointer;
   transition: background-color 240ms var(--fluid);
+  user-select: none;
 
   &:hover {
     background-color: var(--neutral-03);
@@ -146,8 +146,8 @@ ul {
 
   &.primary {
     border: 0.0625rem solid var(--neutral-09);
-    color: var(--neutral-02);
     background-color: var(--neutral-09);
+    color: var(--neutral-02);
 
     &:hover {
       background-color: var(--neutral-10);
diff --git a/docs/src/styles/pages/docs.scss b/docs/src/styles/pages/docs.scss
index ec10946..dc61d6c 100644
--- a/docs/src/styles/pages/docs.scss
+++ b/docs/src/styles/pages/docs.scss
@@ -12,17 +12,17 @@ section {
 pre,
 code {
   border-radius: var(--rounded-sm);
-  font-family: var(--font-commit-mono);
   font-size: inherit;
+  font-family: var(--font-commit-mono);
 }
 
 :not(pre) {
   & > code {
     padding: 0.0625rem 0.375rem;
-    overflow-wrap: break-word;
     border: 0.0625rem solid var(--neutral-04);
-    color: var(--neutral-10);
     background-color: var(--neutral-01);
+    color: var(--neutral-10);
+    overflow-wrap: break-word;
     transition: border-color 240ms var(--fluid);
 
     &:hover {
@@ -32,8 +32,8 @@ code {
 }
 
 .example {
-  width: 100%;
   display: flex;
+  width: 100%;
   gap: 0.5em;
 
   .view {
@@ -80,15 +80,15 @@ code {
 }
 
 .indicators {
+  display: flex;
   width: 100%;
   margin: 0 0 calc(-1 * var(--space-01)) 0;
-  display: flex;
 
   .indicator {
-    padding: 0.25em;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 0.25em;
     border: 0.0625rem solid var(--neutral-04);
 
     &.backgrounds {
@@ -100,8 +100,8 @@ code {
     }
 
     &.separators {
-      border-left: none;
       border-right: none;
+      border-left: none;
     }
 
     &.text {
@@ -119,11 +119,11 @@ code {
 }
 
 .colors {
+  display: flex;
+  position: relative;
   width: 100%;
   margin: 0 0 1rem 0;
-  position: relative;
   overflow: hidden;
-  display: flex;
 
   .col {
     aspect-ratio: 1 / 1;
@@ -231,10 +231,10 @@ code {
 
   &.neutrals {
     margin-bottom: 0;
-    border-left: 0.0625rem solid var(--neutral-04);
     border-right: 0.0625rem solid var(--neutral-04);
     border-bottom: 0.0625rem solid var(--neutral-04);
-    border-bottom-left-radius: var(--rounded-sm);
+    border-left: 0.0625rem solid var(--neutral-04);
     border-bottom-right-radius: var(--rounded-sm);
+    border-bottom-left-radius: var(--rounded-sm);
   }
 }
diff --git a/docs/src/styles/pages/recipes.scss b/docs/src/styles/pages/recipes.scss
index 9f08ca2..6df76ed 100644
--- a/docs/src/styles/pages/recipes.scss
+++ b/docs/src/styles/pages/recipes.scss
@@ -3,12 +3,12 @@
   justify-content: flex-start;
 
   .card {
+    display: flex;
+    flex-direction: column;
+    aspect-ratio: 1/1;
     width: fit-content;
     max-width: calc(33% - var(--gap));
-    aspect-ratio: 1/1;
     padding: 0;
-    display: flex;
-    flex-direction: column;
     text-decoration: none;
 
     .component,
@@ -17,10 +17,10 @@
     }
 
     .component {
-      flex-basis: 0;
+      display: flex;
       flex-grow: 1;
       flex-shrink: 1;
-      display: flex;
+      flex-basis: 0;
       align-items: center;
       justify-content: center;
     }
diff --git a/package.json b/package.json
index b3ec6f4..dae9dbd 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "dotenv-cli": "^7.4.2",
+    "prettier-plugin-css-order": "^2.1.2",
     "prettier": "3.0.3",
     "sass": "^1.69.7"
   },
diff --git a/sass/grid.scss b/sass/grid.scss
index aa3d6bb..3b3521d 100644
--- a/sass/grid.scss
+++ b/sass/grid.scss
@@ -5,24 +5,23 @@
   $i: 50;
 
   @while $i <=100 {
+    $i: $i + 5;
     &-#{$i} {
       width: math.percentage(math.div($i, 100));
-      max-width: #{math.div($i, 100) * 120}rem;
       min-width: #{math.div($i, 100) * 20}rem;
+      max-width: #{math.div($i, 100) * 120}rem;
       margin: 0 auto;
     }
-
-    $i: $i + 5;
   }
 }
 
 .row {
-  width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
+  width: 100%;
   gap: var(--gap);
 
   &.is-gapless {
@@ -32,14 +31,14 @@
 
 .col {
   display: block;
-  flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
+  flex-basis: 0;
 
   @for $i from 1 through 12 {
     &.is-#{$i} {
-      width: math.percentage(math.div($i, 12));
       flex: none;
+      width: math.percentage(math.div($i, 12));
     }
   }
 }
@@ -49,11 +48,10 @@
     $i: 50;
 
     @while $i <=100 {
+      $i: $i + 5;
       &-#{$i} {
         max-width: #{math.div($i, 100) * 48}rem;
       }
-
-      $i: $i + 5;
     }
   }
 
diff --git a/sass/utilities.scss b/sass/utilities.scss
index 9a66c5b..89f765b 100644
--- a/sass/utilities.scss
+++ b/sass/utilities.scss
@@ -86,11 +86,10 @@
   $i: 1;
 
   @while $i <=6 {
+    $i: $i + 1;
     &-0#{$i} {
       gap: var(--space-0#{$i});
     }
-
-    $i: $i + 1;
   }
 }
 
@@ -99,16 +98,16 @@
 }
 
 .sr-only {
-  opacity: 0;
+  position: absolute;
   width: 0;
   height: 0;
   margin: 0;
   padding: 0;
-  position: absolute;
   overflow: hidden;
+  opacity: 0;
   clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
   border: none;
+  white-space: nowrap;
 }
 
 @media screen and (max-width: #{vars.$breakpoint}) {