Misc small fixes

source/00-config/index.css

@@ -1,4 +1,4 @@
-@layer config, global, vendor, layouts, components, utilities;
+@layer config, global, vendor, layouts, components, utility;
 
 @import 'vars/box-shadow.css' layer(config.base);
 @import 'vars/constrain.css' layer(config.base);

source/00-config/mixins/accessibility.css

@@ -4,7 +4,7 @@
   @param {Boolean} $important
  */
 @mixin visually-hidden($important: false) {
-  clip-path: rect(1px, 1px, 1px, 1px) iff($important, !important);
+  clip-path: rect(1px 1px 1px 1px) iff($important, !important);
   height: 1px iff($important, !important);
   overflow: hidden iff($important, !important);
   overflow-wrap: normal iff($important, !important);

source/00-config/mixins/layout.css

@@ -1,28 +1,27 @@
 @mixin layout-align-left($margin) {
-  float: left;
+  float: inline-start;
 
   @if $margin {
-    margin-right: $margin;
+    margin-inline-end: $margin;
   }
 }
 
 @mixin layout-align-right($margin) {
-  float: right;
+  float: inline-end;
 
   @if $margin {
-    margin-left: $margin;
+    margin-inline-start: $margin;
   }
 }
 
 @mixin layout-align-none {
   float: none;
-  margin-left: 0;
-  margin-right: 0;
+  margin-inline: 0;
 }
 
 @mixin layout-constrain() {
   margin-inline: auto;
-  max-width: var(--constrain-md);
+  max-inline-size: var(--constrain-md);
   padding-inline: var(--site-margins);
 
   /**
@@ -38,20 +37,18 @@
   and makes it flush with the edge of the viewport.
  */
 @mixin layout-full-bleed() {
-  left: 50%;
+  inline-size: 100vw;
+  inset-inline: 50%;
   margin-inline: -50vw;
   position: relative;
-  right: 50%;
-  width: 100vw;
 }
 
 /**
   Reverses the above.
  */
 @mixin layout-undo-full-bleed() {
-  left: auto;
+  inline-size: auto;
+  inset-inline: auto;
   margin-inline: 0;
   position: static;
-  right: auto;
-  width: auto;
 }

source/02-layouts/Constrain/constrain.module.css

@@ -1,6 +1,6 @@
 @import 'mixins';
 
-@layer layout {
+@layer layouts {
   .constrain {
     @include layout-constrain();
   }

source/03-components/Wysiwyg/Wysiwyg.tsx

@@ -1,14 +1,15 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
 import { JSX, ReactNode } from 'react';
+import styles from './wysiwyg.module.css';
 
 interface WysiwygProps extends GessoComponent {
   children?: ReactNode;
 }
 
 function Wysiwyg({ children, modifierClasses }: WysiwygProps): JSX.Element {
   return (
-    <div className={clsx('c-wysiwyg u-clearfix', modifierClasses)}>
+    <div className={clsx(styles.wysiwyg, 'u-clearfix', modifierClasses)}>
       {children}
     </div>
   );

source/03-components/Wysiwyg/wysiwyg.module.css

@@ -0,0 +1,3 @@
+@layer components {
+  .wysiwyg {}
+}