fix all spelling

src/snippets/smol-css-grid.njk

@@ -8,7 +8,7 @@ templateEngineOverride: njk, md
 
 {% set description %}
 
-Create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to varable contexts. Each column will resize at the same rate, and break to a new row if the width reaches the `--min` value.
+Create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to variable contexts. Each column will resize at the same rate, and break to a new row if the width reaches the `--min` value.
 
 {% endset %}
 

src/snippets/smol-flexbox-grid.njk

@@ -8,7 +8,7 @@ templateEngineOverride: njk, md
 
 {% set description %}
 
-Create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to varable contexts. Each column will resize at the same rate _until_ reaching the `--min` width. At that point, the last item will break to a new row and fill any available space.
+Create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to variable contexts. Each column will resize at the same rate _until_ reaching the `--min` width. At that point, the last item will break to a new row and fill any available space.
 
 {% endset %}
 

src/snippets/smol-focus-styles.njk

@@ -12,7 +12,7 @@ templateEngineOverride: njk, md
 
 Focus styles are incredibly important for the accessibility of your application. But, it can be difficult to manage them across changing contexts.
 
-The following solution takes advantage of custom properites and `:is()` to set reasonable defaults for interactive elements. Then, individual instances can override each setting by simply providing an alternate value for the custom property.
+The following solution takes advantage of custom properties and `:is()` to set reasonable defaults for interactive elements. Then, individual instances can override each setting by simply providing an alternate value for the custom property.
 
 This solution sets `currentColor` as the `outline-color` which works in many contexts. One that it might not is for buttons, in which case you could update `--outline-color` to use the same color as the button background, for example.
 

src/snippets/smol-responsive-sidebar.njk

@@ -8,7 +8,7 @@ templateEngineOverride: njk, md
 
 {% set description %}
 
-Several layers of delicous modern CSS goodness here! First, we're using `fit-content` to handle the sidebar sizing. This allows the sidebar to grow _up to_ the defined value, but only if it _needs to_, else it will use/shrink to the equivalent of `min-content`. 
+Several layers of delicious modern CSS goodness here! First, we're using `fit-content` to handle the sidebar sizing. This allows the sidebar to grow _up to_ the defined value, but only if it _needs to_, else it will use/shrink to the equivalent of `min-content`.
 
 Next, we use `minmax` for the main content. Why? Because if we only use `1fr` then eventually our sidebar and main will share 50% of the space, and we want the main area to always be wider. We also nest `min` to ask the browser to use the minimum of _either_ of the options. The result in this case is use of `50vw` on mobile-sized viewports, and `30ch` on larger viewports. And, when there's room, it also stretches to `1fr` for the _max_ part of `minmax` 🙌🏽