9 files changed, 162 insertions, 237 deletions

diff --git a/package.json b/package.json
index a9d4cec..fd7ef0c 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
         "sass": "^1.97.3",
         "stylelint": "^17.0.0",
         "stylelint-config-recess-order": "^7.6.0",
-        "stylelint-config-sass-guidelines": "^12.1.0",
+        "stylelint-config-sass-guidelines": "^13.0.0",
         "stylelint-order": "^7.0.1",
         "svg-sprite": "^2.0.4"
     }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f940590..d6e4c99 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,16 +35,16 @@ importers:
         version: 1.97.3
       stylelint:
         specifier: ^17.0.0
-        version: 17.0.0
+        version: 17.1.1
       stylelint-config-recess-order:
         specifier: ^7.6.0
-        version: 7.6.0(stylelint-order@7.0.1(stylelint@17.0.0))(stylelint@17.0.0)
+        version: 7.6.0(stylelint-order@7.0.1(stylelint@17.1.1))(stylelint@17.1.1)
       stylelint-config-sass-guidelines:
-        specifier: ^12.1.0
-        version: 12.1.0(postcss@8.5.6)(stylelint@17.0.0)
+        specifier: ^13.0.0
+        version: 13.0.0(postcss@8.5.6)(stylelint@17.1.1)
       stylelint-order:
         specifier: ^7.0.1
-        version: 7.0.1(stylelint@17.0.0)
+        version: 7.0.1(stylelint@17.1.1)
       svg-sprite:
         specifier: ^2.0.4
         version: 2.0.4
@@ -86,12 +86,6 @@ packages:
     resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
     engines: {node: '>=0.1.90'}
 
-  '@csstools/css-parser-algorithms@3.0.1':
-    resolution: {integrity: sha512-lSquqZCHxDfuTg/Sk2hiS0mcSFCEBuj49JfzPHJogDBT0mGCyY5A1AQzBWngitrp7i1/HAZpIgzF/VjhOEIJIg==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@csstools/css-tokenizer': ^3.0.1
-
   '@csstools/css-parser-algorithms@4.0.0':
     resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
     engines: {node: '>=20.19.0'}
@@ -101,21 +95,10 @@ packages:
   '@csstools/css-syntax-patches-for-csstree@1.0.26':
     resolution: {integrity: sha512-6boXK0KkzT5u5xOgF6TKB+CLq9SOpEGmkZw0g5n9/7yg85wab3UzSxB8TxhLJ31L4SGJ6BCFRw/iftTha1CJXA==}
 
-  '@csstools/css-tokenizer@3.0.1':
-    resolution: {integrity: sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==}
-    engines: {node: '>=18'}
-
   '@csstools/css-tokenizer@4.0.0':
     resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
     engines: {node: '>=20.19.0'}
 
-  '@csstools/media-query-list-parser@3.0.1':
-    resolution: {integrity: sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@csstools/css-parser-algorithms': ^3.0.1
-      '@csstools/css-tokenizer': ^3.0.1
-
   '@csstools/media-query-list-parser@5.0.0':
     resolution: {integrity: sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==}
     engines: {node: '>=20.19.0'}
@@ -188,36 +171,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.6':
     resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.6':
     resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.6':
     resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.6':
     resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.6':
     resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.6':
     resolution: {integrity: sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==}
@@ -276,24 +265,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@resvg/resvg-js-linux-arm64-musl@2.6.2':
     resolution: {integrity: sha512-3h3dLPWNgSsD4lQBJPb4f+kvdOSJHa5PjTYVsWHxLUzH4IFTJUAnmuWpw4KqyQ3NA5QCyhw4TWgxk3jRkQxEKg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@resvg/resvg-js-linux-x64-gnu@2.6.2':
     resolution: {integrity: sha512-IVUe+ckIerA7xMZ50duAZzwf1U7khQe2E0QpUxu5MBJNao5RqC0zwV/Zm965vw6D3gGFUl7j4m+oJjubBVoftw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@resvg/resvg-js-linux-x64-musl@2.6.2':
     resolution: {integrity: sha512-UOf83vqTzoYQO9SZ0fPl2ZIFtNIz/Rr/y+7X8XRX1ZnBYsQ/tTb+cj9TE+KHOdmlTFBxhYzVkP2lRByCzqi4jQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@resvg/resvg-js-win32-arm64-msvc@2.6.2':
     resolution: {integrity: sha512-7C/RSgCa+7vqZ7qAbItfiaAWhyRSoD4l4BQAbVDqRRsRgY+S+hgS3in0Rxr7IorKUpGE69X48q6/nOAuTJQxeQ==}
@@ -321,11 +314,11 @@ packages:
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
-  '@stylistic/stylelint-plugin@3.1.1':
-    resolution: {integrity: sha512-XagAHHIa528EvyGybv8EEYGK5zrVW74cHpsjhtovVATbhDRuJYfE+X4HCaAieW9lCkwbX6L+X0I4CiUG3w/hFw==}
-    engines: {node: ^18.12 || >=20.9}
+  '@stylistic/stylelint-plugin@5.0.1':
+    resolution: {integrity: sha512-NaVwCNVZ2LyPA3TnUwvjO9c6P6VUjgRB8UP8SOW+cAOJBVqPPuOIDawsvvtql/LhkuR3JuTdGvr/RM3dUl8l2Q==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
-      stylelint: ^16.8.0
+      stylelint: ^17.0.0
 
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
@@ -574,10 +567,6 @@ packages:
     resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
     engines: {node: '>=8.0.0'}
 
-  css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
   css-tree@3.1.0:
     resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -942,9 +931,6 @@ packages:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
 
-  known-css-properties@0.34.0:
-    resolution: {integrity: sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==}
-
   known-css-properties@0.37.0:
     resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
 
@@ -984,12 +970,12 @@ packages:
   mdn-data@2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
 
-  mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
+  mdn-data@2.27.0:
+    resolution: {integrity: sha512-/pUmP9UebM48q5BTqZd0yPnDjyRGhITbKh8cwa6/ZwjuDu8xq+VzmugLF7QNxpdaqqNH3J5nnv3yc8oARv096A==}
+
   meow@14.0.0:
     resolution: {integrity: sha512-JhC3R1f6dbspVtmF3vKjAWz1EVIvwFrGGPLSdU6rK79xBwHWTuHoLnRX/t1/zHS1Ch1Y2UtIrih7DAHuH9JFJA==}
     engines: {node: '>=20'}
@@ -1096,10 +1082,6 @@ packages:
     peerDependencies:
       postcss: ^8.4.29
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
   postcss-selector-parser@7.1.1:
     resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
     engines: {node: '>=4'}
@@ -1333,8 +1315,8 @@ packages:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
 
-  string-width@8.1.0:
-    resolution: {integrity: sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==}
+  string-width@8.1.1:
+    resolution: {integrity: sha512-KpqHIdDL9KwYk22wEOg/VIqYbrnLeSApsKT/bSj6Ez7pn3CftUiLAv2Lccpq1ALcpLV9UX1Ppn92npZWu2w/aw==}
     engines: {node: '>=20'}
 
   string_decoder@1.1.1:
@@ -1364,12 +1346,12 @@ packages:
       stylelint: ^16.18.0 || ^17.0.0
       stylelint-order: ^7.0.0
 
-  stylelint-config-sass-guidelines@12.1.0:
-    resolution: {integrity: sha512-NTxEtVT6uNSqRvq+A3ScyKhjUrY/Z845TnpWEwnMgIPZ/+/Waa4+51r6OPuQRMu4XZS3D8DK1UaT4TWFBvuuAw==}
-    engines: {node: '>=18.12.0'}
+  stylelint-config-sass-guidelines@13.0.0:
+    resolution: {integrity: sha512-YJT0X8h0OqyEo7ys3EycV5CGWt2rrkEYE8sHSN6sFnrxbXvHiy4KJFHDOWfyb3eWR6wtYpM+yIyvR2Plc8+pCg==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4.21
-      stylelint: ^16.1.0
+      stylelint: ^17.1.0
 
   stylelint-order@7.0.1:
     resolution: {integrity: sha512-GWPei1zBVDDjxM+/BmcSCiOcHNd8rSqW6FUZtqQGlTRpD0Z5nSzspzWD8rtKif5KPdzUG68DApKEV/y/I9VbTw==}
@@ -1377,14 +1359,14 @@ packages:
     peerDependencies:
       stylelint: ^16.18.0 || ^17.0.0
 
-  stylelint-scss@6.7.0:
-    resolution: {integrity: sha512-RFIa2A+pVWS5wjNT+whtK7wsbZEWazyqesCuSaPbPlZ8lh2TujwVJSnCYJijg6ChZzwI8pZPRZS1L6A9aCbXDg==}
-    engines: {node: '>=18.12.0'}
+  stylelint-scss@7.0.0:
+    resolution: {integrity: sha512-H88kCC+6Vtzj76NsC8rv6x/LW8slBzIbyeSjsKVlS+4qaEJoDrcJR4L+8JdrR2ORdTscrBzYWiiT2jq6leYR1Q==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
-      stylelint: ^16.0.2
+      stylelint: ^16.8.2 || ^17.0.0
 
-  stylelint@17.0.0:
-    resolution: {integrity: sha512-saMZ2mqdQre4AfouxcbTdpVglDRcROb4MIucKHvgsDb/0IX7ODhcaz+EOIyfxAsm8Zjl/7j4hJj6MgIYYM8Xwg==}
+  stylelint@17.1.1:
+    resolution: {integrity: sha512-SBHVcLEcRF1M9OkD3oT0hT2PayDNLw2hd+aovmzfNQ2ys4Xd3oS9ZNizILWqhQvW802AqKN/vUTMwJqQYMBlWw==}
     engines: {node: '>=20.19.0'}
     hasBin: true
 
@@ -1579,25 +1561,14 @@ snapshots:
 
   '@colors/colors@1.6.0': {}
 
-  '@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1)':
-    dependencies:
-      '@csstools/css-tokenizer': 3.0.1
-
   '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
 
   '@csstools/css-syntax-patches-for-csstree@1.0.26': {}
 
-  '@csstools/css-tokenizer@3.0.1': {}
-
   '@csstools/css-tokenizer@4.0.0': {}
 
-  '@csstools/media-query-list-parser@3.0.1(@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1))(@csstools/css-tokenizer@3.0.1)':
-    dependencies:
-      '@csstools/css-parser-algorithms': 3.0.1(@csstools/css-tokenizer@3.0.1)
-      '@csstools/css-tokenizer': 3.0.1
-
   '@csstools/media-query-list-parser@5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
@@ -1751,16 +1722,16 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
-  '@stylistic/stylelint-plugin@3.1.1(stylelint@17.0.0)':
+  '@stylistic/stylelint-plugin@5.0.1(stylelint@17.1.1)':
     dependencies:
-      '@csstools/css-parser-algorithms': 3.0.1(@csstools/css-tokenizer@3.0.1)
-      '@csstools/css-tokenizer': 3.0.1
-      '@csstools/media-query-list-parser': 3.0.1(@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1))(@csstools/css-tokenizer@3.0.1)
-      is-plain-object: 5.0.0
-      postcss-selector-parser: 6.1.2
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
       postcss-value-parser: 4.2.0
       style-search: 0.1.0
-      stylelint: 17.0.0
+      stylelint: 17.1.1
 
   '@trysound/sax@0.2.0': {}
 
@@ -2015,11 +1986,6 @@ snapshots:
       mdn-data: 2.0.14
       source-map: 0.6.1
 
-  css-tree@2.3.1:
-    dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.2.1
-
   css-tree@3.1.0:
     dependencies:
       mdn-data: 2.12.2
@@ -2337,8 +2303,6 @@ snapshots:
 
   kind-of@6.0.3: {}
 
-  known-css-properties@0.34.0: {}
-
   known-css-properties@0.37.0: {}
 
   kuler@2.0.0: {}
@@ -2370,10 +2334,10 @@ snapshots:
 
   mdn-data@2.0.14: {}
 
-  mdn-data@2.0.30: {}
-
   mdn-data@2.12.2: {}
 
+  mdn-data@2.27.0: {}
+
   meow@14.0.0: {}
 
   merge2@1.4.1: {}
@@ -2467,11 +2431,6 @@ snapshots:
     dependencies:
       postcss: 8.5.6
 
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-selector-parser@7.1.1:
     dependencies:
       cssesc: 3.0.0
@@ -2759,7 +2718,7 @@ snapshots:
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
-  string-width@8.1.0:
+  string-width@8.1.1:
     dependencies:
       get-east-asian-width: 1.4.0
       strip-ansi: 7.1.2
@@ -2786,37 +2745,38 @@ snapshots:
 
   style-search@0.1.0: {}
 
-  stylelint-config-recess-order@7.6.0(stylelint-order@7.0.1(stylelint@17.0.0))(stylelint@17.0.0):
+  stylelint-config-recess-order@7.6.0(stylelint-order@7.0.1(stylelint@17.1.1))(stylelint@17.1.1):
     dependencies:
-      stylelint: 17.0.0
-      stylelint-order: 7.0.1(stylelint@17.0.0)
+      stylelint: 17.1.1
+      stylelint-order: 7.0.1(stylelint@17.1.1)
 
-  stylelint-config-sass-guidelines@12.1.0(postcss@8.5.6)(stylelint@17.0.0):
+  stylelint-config-sass-guidelines@13.0.0(postcss@8.5.6)(stylelint@17.1.1):
     dependencies:
-      '@stylistic/stylelint-plugin': 3.1.1(stylelint@17.0.0)
+      '@stylistic/stylelint-plugin': 5.0.1(stylelint@17.1.1)
       postcss: 8.5.6
       postcss-scss: 4.0.9(postcss@8.5.6)
-      stylelint: 17.0.0
-      stylelint-scss: 6.7.0(stylelint@17.0.0)
+      stylelint: 17.1.1
+      stylelint-scss: 7.0.0(stylelint@17.1.1)
 
-  stylelint-order@7.0.1(stylelint@17.0.0):
+  stylelint-order@7.0.1(stylelint@17.1.1):
     dependencies:
       postcss: 8.5.6
       postcss-sorting: 9.1.0(postcss@8.5.6)
-      stylelint: 17.0.0
+      stylelint: 17.1.1
 
-  stylelint-scss@6.7.0(stylelint@17.0.0):
+  stylelint-scss@7.0.0(stylelint@17.1.1):
     dependencies:
-      css-tree: 2.3.1
+      css-tree: 3.1.0
       is-plain-object: 5.0.0
-      known-css-properties: 0.34.0
+      known-css-properties: 0.37.0
+      mdn-data: 2.27.0
       postcss-media-query-parser: 0.2.3
       postcss-resolve-nested-selector: 0.1.6
-      postcss-selector-parser: 6.1.2
+      postcss-selector-parser: 7.1.1
       postcss-value-parser: 4.2.0
-      stylelint: 17.0.0
+      stylelint: 17.1.1
 
-  stylelint@17.0.0:
+  stylelint@17.1.1:
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-syntax-patches-for-csstree': 1.0.26
@@ -2851,7 +2811,7 @@ snapshots:
       postcss-safe-parser: 7.0.1(postcss@8.5.6)
       postcss-selector-parser: 7.1.1
       postcss-value-parser: 4.2.0
-      string-width: 8.1.0
+      string-width: 8.1.1
       supports-hyperlinks: 4.4.0
       svg-tags: 1.0.0
       table: 6.9.0
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b95148f..5ff6d93 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -8,127 +8,104 @@
 @forward 'lightbox.vars';
 @use 'lightbox.vars' as vars;
 
+@use 'backdrop.vars' as backdrop;
+@use 'thumbnail.vars' as thumbnail;
+
 @mixin styles {
         @include materialize-at-root(meta.module-variables('vars'));
 
         @include bem.object('lightbox') {
-                flex:           1 1 auto;
-                min-block-size: 0;
+                box-sizing:       border-box;
+                display:          none;
+                flex:             1 1 auto;
+                flex-direction:   column;
+                justify-content:  flex-end;
+                inline-size:      100%;
+                max-inline-size:  none;
+                block-size:       100%;
+                min-block-size:   0;
+                max-block-size:   none;
+                padding:          0;
+                margin:           0;
+                background-color: transparent;
+                border:           0;
+
+                &::backdrop {
+                        background-color: props.get(backdrop.$bg-color);
+                        backdrop-filter: blur(props.get(backdrop.$blur));
+                }
+
+                &[open] {
+                        display: flex;
+                }
 
-                @include bem.elem('header') {
-                        display:             flex;
-                        grid-area:           header;
-                        align-items:         flex-start;
-                        padding-block-start: props.get(vars.$pad);
-                        padding-inline:      props.get(vars.$pad);
+                @include bem.elem('controls') {
+                        position:          absolute;
+                        inset-block-start: props.get(vars.$pad);
+                        inset-inline-end:  props.get(vars.$pad);
+                        z-index:           20;
+                        padding:           props.get(vars.$controls--pad-y) props.get(vars.$controls--pad-x);
+                        border-radius:     10em;
                 }
 
                 @include bem.elem('img') {
-                        box-sizing:      border-box;
+                        position:        relative;
+                        z-index:         10;
                         display:         block;
-                        grid-area:       content;
-                        place-self:      center;
+                        flex:            1 1 auto;
                         inline-size:     auto;
+                        min-inline-size: 0;
                         max-inline-size: 100%;
                         block-size:      auto;
-                        max-block-size:  props.get(vars.$image--max-height);
-                        padding:         props.get(vars.$pad);
-                        margin-inline:   auto;
-                        border-radius:   calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
-                }
+                        min-block-size:  0;
+                        max-block-size:  100%;
+                        margin:          auto;
+                        object-fit:      contain;
 
-                @include bem.elem('thumbnails') {
-                        display:            none;
-                        grid-area:          thumbnails;
-                        gap:                props.get(vars.$thumbnails--spacing);
-                        padding:            props.get(vars.$pad);
-                        margin-block-start: calc(-1 * props.get(vars.$pad));
-                        overflow:           auto;
-                }
+                        @include bem.is('hidden') {
+                                display: none;
 
-                @include bem.elem('close-btn') {
-                        display:            none;
-                        flex:               0 0 auto;
-                        margin-block-start: calc(-.5 * props.get(vars.$pad));
-                        margin-inline:      auto calc(-.5 * props.get(vars.$pad));
-                        font-size:          props.get(vars.$close-button--font-size);
-                }
-
-                @include bem.elem('nav-btn') {
-                        position:   relative;
-                        display:    none;
-                        align-self: center;
-                        overflow:   visible;
-                        font-size:  props.get(vars.$nav-button--font-size);
-
-                        &::before {
-                                position:           absolute;
-                                inset-block-start:  50%;
-                                display:            block;
-                                inline-size:        props.get(vars.$nav-button--inline-size);
-                                block-size:         props.get(vars.$nav-button--block-size);
-                                content:            '';
-                                transform:          translateY(-50%);
-                        }
-
-                        @include bem.modifier('prev') {
-                                grid-area:     prev;
-                                margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
-
-                                &::before {
-                                        inset-inline-start: 0;
-                                }
-                        }
-    
-                        @include bem.modifier('next') {
-                                grid-area:     next;
-                                margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
-
-                                &::before {
-                                        inset-inline-end: 0;
+                                @include bem.next-elem('placeholder') {
+                                        display: block;
                                 }
                         }
                 }
 
-                @include bem.modifier('interactive') {
-                        display:               grid;
-                        grid-template-areas:
-                                'header     header     header'
-                                'prev       content    next'
-                                'thumbnails thumbnails thumbnails';
-                        grid-template-rows:    auto minmax(0, 1fr) auto auto;
-                        grid-template-columns: auto minmax(0, 1fr) auto;
-
-                        @include bem.modifier('fullscreen') {
-                                block-size: props.get(vars.$fullscreen--height);
-                        }
-
-                        @include bem.elem('img') {
-                                display:        none;
-                                max-block-size: 100%;
-                                margin-inline:  0;
-
-                                @include bem.multi('&:target', 'is' 'visible') {
-                                        display: block;
-                                }
-                        }
+                @include bem.elem('placeholder') {
+                        position:           absolute;
+                        inset-block-start:  50%;
+                        inset-inline-start: 50%;
+                        z-index:            5;
+                        display:            none;
+                        transform:          translate(-50, -50);
+                }
 
-                        @include bem.elem('thumbnails') {
-                                display: flex;
-                        }
+                @include bem.elem('thumbnails') {
+                        display:                 flex;
+                        flex:            0 0 auto;
+                        gap:             props.get(vars.$thumbnail--spacing);
+                        justify-content: center;
+                        padding:         props.get(vars.$pad);
+                        overflow:        auto;
+                }
 
-                        @include bem.elem('close-btn') {
-                                display: block;
-                        }
+                @include bem.elem('thumbnail') {
+                        inline-size: props.get(vars.$thumbnail--width);
+                        transition:  inline-size .1s ease, margin-inline .1s ease;
 
-                        @include bem.elem('nav-btn') {
-                                display: block;
+                        @include bem.is('selected') {
+                                inline-size:  props.get(vars.$thumbnail--active--width);
+                                margin-inline: props.get(vars.$thumbnail--active--spacing);
                         }
                 }
 
                 @each $theme in map.keys(props.get(vars.$static-themes)) {
                         @include bem.modifier(string.slice($theme, 3)) {
                                 color: props.get(vars.$static-themes, $theme, --text);
+
+                                @include bem.elem('controls') {
+                                        background-color: props.get(vars.$static-themes, $theme, --controls-bg);
+                                }
                         }
                 }
         }
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index 6d22aa8..9f200b0 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -4,30 +4,27 @@
 @use '../core.vars' as core;
 
 $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
-$fullscreen--height:  props.def(--o-lightbox--fullscreen--height, 100vh) !default;
 
-$image--max-height:    props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default;
-$image--border-radius: props.def(--o-lightbox--image--border-radius, props.get(core.$rounding)) !default;
+$controls--pad-x: props.def(--o-lightbox--controls--pad-x, props.get(core.$size--150)) !default;
+$controls--pad-y: props.def(--o-lightbox--controls--pad-y, props.get(core.$size--50)) !default;
 
-$close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default;
-
-$nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default;
-$nav-button--block-size:  props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default;
-$nav-button--font-size:   props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default;
-
-$nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default;
-$nav-button--block-size--md:  props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default;
-
-$thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(core.$size--100)) !default;
+$thumbnail--width:           props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default;
+$thumbnail--spacing:         props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default;
+$thumbnail--active--width:   props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--1000)) !default;
+$thumbnail--active--spacing: props.def(--o-lightbox--thumbnail--active--spacing, props.get(core.$size--250)) !default;
 
 $static-themes: props.def(--o-lightbox, (), 'color');
 
+$thumbnail--width--md:         props.def(--o-lightbox--thumbnail--width, props.get(core.$size--400), 'md') !default;
+$thumbnail--active--width--md: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--600), 'md') !default;
+
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
         $lightbox-theme: --static-#{string.slice($theme, 3)};
 
         $static-themes: props.merge($static-themes, (
                 $lightbox-theme: (
-                        --text: props.get(core.$transparent-colors, $theme, --800),
+                        --text:        props.get(core.$transparent-colors, $theme, --text),
+                        --controls-bg: props.get(core.$transparent-colors, $theme, --700),
                 )
         ));
 }
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 60a98af..2ccb50b 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -21,7 +21,6 @@
                 outline:        props.get(vars.$border-color) solid props.get(vars.$border-width);
                 outline-offset: calc(-1 * props.get(vars.$border-width));
                 border-radius:  props.get(vars.$rounding);
-                opacity:       .75;
 
                 &:hover,
                 &:active,
@@ -30,16 +29,6 @@
                         opacity:       1;
                 }
 
-                @include bem.is('selected') {
-                        $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
-
-                        margin:        $focus-border-offset;
-                        outline:       none;
-                        border:        props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
-                        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
-                        opacity:       1;
-                }
-
                 @include bem.elem('image') {
                         position:           absolute;
                         inset-block-start:  0;
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index e49e52e..d2a38c0 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -3,7 +3,7 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$size:         props.def(--o-thumbnail--size, props.get(core.$size--700)) !default;
+$size:         props.def(--o-thumbnail--size, props.get(core.$size--900)) !default;
 $rounding:     props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default;
 $spacing:      props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
 $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default;
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 53b01af..257318e 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -35,6 +35,7 @@
 @include iro.o-figure--styles;
 @include iro.o-field-label--styles;
 @include iro.o-heading--styles;
+@include iro.o-thumbnail--styles;
 @include iro.o-lightbox--styles;
 @include iro.o-menu--styles;
 @include iro.o-navbar--styles;
@@ -47,7 +48,6 @@
 @include iro.o-table--styles;
 @include iro.o-tabbar--styles;
 @include iro.o-text-field--styles;
-@include iro.o-thumbnail--styles;
 
 @include iro.utils--styles;
 
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 2d520b5..0fddad1 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -11,26 +11,28 @@ mixin lightbox(images)
         }
         let thumbnailClasses = {
             'o-thumbnail': true,
+            'o-lightbox__thumbnail': true,
         }
+        let inverseTheme = {
+            "static-black": "static-white",
+            "static-white": "static-black",
+        }[attributes.theme]
 
         if (attributes.theme) {
             classes[`o-lightbox--${attributes.theme}`] = true;
-            linksClasses[`s-links--${attributes.theme}`] = true;
-            thumbnailClasses[`o-thumbnail--${attributes.theme}`] = true;
+            linksClasses[`s-links--${inverseTheme}`] = true;
+            thumbnailClasses[`o-thumbnail--${inverseTheme}`] = true;
         }
 
     div(class=classes)
-        header.o-lightbox__header
-            div(class=linksClasses)
-                block
-            +button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
-
         each img, i in images
             img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`)
 
-        if images.length > 1
-            +button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
-            +button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+        .o-lightbox__controls
+            if images.length > 1
+                +button(theme=inverseTheme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
+                +button(theme=inverseTheme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+            +button(theme=inverseTheme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
 
         .o-lightbox__thumbnails
             each img, i in images
@@ -38,7 +40,7 @@ mixin lightbox(images)
                     let classes = { 'is-selected': i === 0 }
                     Object.assign(classes, thumbnailClasses)
 
-                a.o-thumbnail(class=classes href='#image-' + i)
+                a(class=classes href='#image-' + i)
                     img.o-thumbnail__image(src=img)
             button(class=thumbnailClasses)
                 +icon('volume-2')(class='o-thumbnail__icon')
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 7e366c0..c4b9878 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -14,7 +14,7 @@ mixin view-lightbox
 
         .c-box
             +backdrop
-                +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white')
+                +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-black')
                     = "Let's try multiple links! "
                     a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                         = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
@@ -27,7 +27,7 @@ mixin view-lightbox
 
         .c-box
             +backdrop
-                +lightbox(['avatar.png'])(theme='static-white')
+                +lightbox(['avatar.png'])(theme='static-black')
                     = "Let's try multiple links! "
                     a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                         = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
@@ -39,7 +39,7 @@ mixin view-lightbox
                         = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
 
         +backdrop(maxHeight=true)
-            +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white' interactive=true)
+            +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-black' interactive=true)
                 = "Let's try multiple links! "
                 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
                     = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"