From 5ca5b4a58cb1c05b3fa370b601551851d2439410 Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Wed, 4 Feb 2026 16:27:53 -0500
Subject: [PATCH 01/11] prettier formatting

---
 package.json                                  |   6 +
 resources/Overview.md                         |  28 +-
 resources/index.md                            |   1 +
 resources/js/components/PAccordion.vue        |   4 +-
 resources/js/components/PLazy.vue             |  86 ++--
 resources/js/components/POpenable.vue         |  24 +-
 resources/js/components/PSlider.vue           |  20 +-
 resources/js/components/PTabs.vue             |  75 ++-
 resources/js/components/PWistia.vue           |  33 +-
 resources/js/components/PYouTube.vue          |  70 +--
 resources/js/components/PYouTubePlaylist.vue  |  21 +-
 .../js/composables/UseDirectionalKeys.js      |   4 +-
 resources/js/composables/focusWithArrows.js   |  12 +-
 resources/js/directives/vDirectionals.js      |   4 +-
 resources/styles/atoms/breadcrumbs/index.scss |  10 +-
 .../styles/atoms/button/button--icon.html     |  16 +-
 .../atoms/button/button--messaging.html       |   1 -
 .../atoms/button/button-on-primary.html       |   2 +-
 resources/styles/atoms/button/button.html     |  16 +-
 resources/styles/atoms/button/index.scss      |   8 +-
 resources/styles/atoms/checkbox/checkbox.html |   9 +-
 resources/styles/atoms/checkbox/index.scss    |   6 +-
 resources/styles/atoms/dropdown/dropdown.html |  17 +-
 resources/styles/atoms/dropdown/index.scss    |  10 +-
 resources/styles/atoms/eyebrow/index.scss     |   6 +-
 resources/styles/atoms/heading/index.scss     |  20 +-
 resources/styles/atoms/icon/icon.html         | 163 +++---
 resources/styles/atoms/icon/index.scss        |   4 +-
 resources/styles/atoms/index.scss             |  30 +-
 resources/styles/atoms/input/index.scss       |  13 +-
 resources/styles/atoms/input/input.html       |  16 +-
 resources/styles/atoms/link/link.html         |  10 +-
 resources/styles/atoms/media/index.scss       |  13 +-
 .../styles/atoms/media/media-PWistia.html     |  13 +-
 .../styles/atoms/media/media-PYouTube.html    |  12 +-
 .../atoms/media/media-PYouTubePlaylist.html   |   9 +-
 resources/styles/atoms/radio/index.scss       |  14 +-
 resources/styles/atoms/radio/radio.html       |  14 +-
 resources/styles/atoms/search/index.scss      |   5 +-
 resources/styles/atoms/search/search.html     |   4 +-
 resources/styles/atoms/select/index.scss      |   6 +-
 .../styles/atoms/select/multiselect.scss      |   2 +-
 resources/styles/atoms/select/select.html     |   4 +-
 resources/styles/atoms/switch/index.scss      |   6 +-
 resources/styles/atoms/switch/switch.html     |  18 +-
 resources/styles/atoms/tag/index.scss         | 181 +++----
 resources/styles/config/index.scss            |  39 +-
 resources/styles/core/Fluid-Typgraphy.md      |  17 +-
 resources/styles/core/Properties.md           |  15 +-
 resources/styles/core/accentColors.scss       |  12 +-
 resources/styles/core/base.scss               |   5 +-
 resources/styles/core/dev.scss                |   8 +-
 resources/styles/core/functions/fluid.scss    |   2 +-
 resources/styles/core/index.scss              |  18 +-
 resources/styles/core/mixins/breakpoints.scss |  10 +-
 resources/styles/core/properties.scss         |  84 ++--
 .../core/utilities/container/container.html   |  10 +-
 .../core/utilities/container/index.scss       |   9 +-
 .../styles/core/utilities/grid/cell.scss      |   1 -
 .../styles/core/utilities/grid/grid.html      |  33 +-
 .../styles/core/utilities/grid/index.scss     |   2 +-
 resources/styles/core/utilities/index.scss    |   6 +-
 .../styles/core/utilities/srOnly/index.scss   |  18 +-
 .../styles/core/utilities/srOnly/srOnly.html  |   4 +-
 resources/styles/index.scss                   |  14 +-
 .../styles/molecules/accordion/accordion.html | 160 +++---
 .../styles/molecules/accordion/index.scss     | 134 ++---
 resources/styles/molecules/banner/banner.html |  16 +-
 .../molecules/card/card--condensed.html       |  66 ++-
 .../styles/molecules/card/card--flipped.html  |  34 +-
 .../styles/molecules/card/card--icon.html     |  26 +-
 resources/styles/molecules/card/card.html     |  32 +-
 resources/styles/molecules/card/index.scss    |   6 +-
 .../styles/molecules/checklist/checklist.html |  43 +-
 .../molecules/featureVideo/featureVideo.html  |  62 +--
 .../styles/molecules/featureVideo/index.scss  |   6 +-
 resources/styles/molecules/field/field.html   |  20 +-
 resources/styles/molecules/field/index.scss   |   4 +-
 resources/styles/molecules/index.scss         |  30 +-
 resources/styles/molecules/list/index.scss    |  12 +-
 resources/styles/molecules/list/list.html     |  64 +--
 .../styles/molecules/logoGrid/index.scss      |  56 +--
 .../styles/molecules/logoGrid/logoGrid.html   |  72 +--
 .../molecules/mobileNavigation/index.scss     |  11 +-
 .../mobileNavigation/mobileNavigation.html    |   7 +-
 .../styles/molecules/navigation/index.scss    |   7 +-
 .../navigation/navigation-hoverable.html      | 122 +++--
 .../molecules/navigation/navigation.html      |  65 +--
 .../styles/molecules/pagination/index.scss    |  11 +-
 .../molecules/pagination/pagination.html      | 130 ++---
 resources/styles/molecules/tabs/index.scss    |  18 +-
 .../styles/molecules/tabs/tabs--solid.html    |   3 -
 .../styles/molecules/tabs/tabs--vertical.html |   2 -
 resources/styles/molecules/tabs/tabs.html     |   3 -
 .../styles/molecules/testimonial/index.scss   | 212 ++++----
 .../testimonial/testimonial--aside.html       |  26 +-
 .../testimonial/testimonial--featured.html    |  30 +-
 .../molecules/testimonial/testimonial.html    |  30 +-
 .../organisms/basicSection/basicSection.html  |  92 ++--
 .../styles/organisms/basicSection/index.scss  |   9 +-
 .../organisms/basicSection/oneColumn.html     |  22 +-
 .../organisms/callout/callout--split.html     |  24 +-
 .../styles/organisms/callout/callout.html     |  64 +--
 resources/styles/organisms/dialog/dialog.html |   4 +-
 resources/styles/organisms/dialog/index.scss  |   4 +-
 .../featuredTestimonials.html                 | 104 ++--
 .../organisms/featuredTestimonials/index.scss |  38 +-
 resources/styles/organisms/form/form.html     |  14 +-
 .../organisms/hero/hero--gradients.html       |  15 +-
 resources/styles/organisms/hero/hero.html     |   6 +-
 resources/styles/organisms/hero/index.scss    |  32 +-
 resources/styles/organisms/index.scss         |  30 +-
 .../styles/organisms/logoCloud/index.scss     |  36 +-
 .../styles/organisms/logoCloud/logoCloud.html | 307 ++++++------
 .../styles/organisms/mediaBanner/index.scss   |  30 +-
 .../organisms/mediaBanner/mediaBanner.html    | 200 +++-----
 resources/styles/organisms/message/index.scss |  11 +-
 .../organisms/message/message--dark.html      |  24 +-
 .../styles/organisms/message/message.html     |  24 +-
 .../styles/organisms/richText/index.scss      |   7 +-
 .../styles/organisms/richText/richText.html   |  35 +-
 .../styles/organisms/section/section.html     |  12 +-
 .../styles/organisms/siteFooter/index.scss    |  33 +-
 .../organisms/siteFooter/siteFooter.html      |  24 +-
 .../styles/organisms/siteHeader/index.scss    |  24 +-
 .../organisms/siteHeader/siteHeader.html      | 474 ++++++++++--------
 resources/styles/organisms/slider/index.scss  |   2 +-
 resources/styles/organisms/slider/slider.html |   7 +-
 resources/styles/organisms/stats/index.scss   |   2 +-
 resources/styles/organisms/stats/stats.html   |   9 +-
 resources/styles/organisms/table/index.scss   |   7 +-
 .../organisms/table/table--scrollable.html    |   6 +-
 .../testimonialSlider/testimonialSlider.html  |  76 +--
 resources/styles/utilities/colors/colors.html |   1 -
 resources/styles/utilities/colors/index.scss  |  24 +-
 resources/styles/utilities/index.scss         |   2 +-
 136 files changed, 2228 insertions(+), 2480 deletions(-)

diff --git a/package.json b/package.json
index 0521ab4..03ac182 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,12 @@
     "browserslist": [
         "defaults"
     ],
+    "prettier": {
+        "arrowParens": "avoid",
+        "printWidth": 999,
+        "semi": false,
+        "singleQuote": true
+    },
     "eslintConfig": {
         "env": {
             "browser": true,
diff --git a/resources/Overview.md b/resources/Overview.md
index 3db1c4b..1bbc06e 100644
--- a/resources/Overview.md
+++ b/resources/Overview.md
@@ -1,25 +1,24 @@
 # Overview
+
 ##### Pronto is Imarc's front-end framework for websites and web applications.
 
 It is open source, opinionated, and is built to be changed over configured, with an emphasis on the code being simple to read, maintain, and adapt to individual project needs.
 
 Pronto uses [Vite](https://vite.dev/) and [Vitrine](https://github.com/imarc/vitrine) to provide this library of its components, that becomes part of your project. See [Pronto's own site](https://imarc-pronto.netlify.app/components/) to see the latest components.
 
-
 ## Organization
 
 Pronto's components are organized following [Atomic Design](https://atomicdesign.bradfrost.com/):
 
-* **Atoms** are the smallest components, and should not contain any other components. *Examples: buttons, inputs, tags, headings.*
-* **Molecules** are the next smallest, and should only depend on atoms. *Examples: banners, accordions, lists, pagination.*
-* **Organisms** can depend on both atoms and molecules. These often represent a full slice across the page. *Examples: hero, section, site header, site footer.*
-* Pronto currently doesn't ship with any **Templates** or **Pages**, but these groups should be created as appropriate.
-* **Utilities** are components that are meant to be used with other components and primarily provide functionality.
-* **Imported** components are not copied into your project by default. They are meant to be consistent across projects.
+- **Atoms** are the smallest components, and should not contain any other components. _Examples: buttons, inputs, tags, headings._
+- **Molecules** are the next smallest, and should only depend on atoms. _Examples: banners, accordions, lists, pagination._
+- **Organisms** can depend on both atoms and molecules. These often represent a full slice across the page. _Examples: hero, section, site header, site footer._
+- Pronto currently doesn't ship with any **Templates** or **Pages**, but these groups should be created as appropriate.
+- **Utilities** are components that are meant to be used with other components and primarily provide functionality.
+- **Imported** components are not copied into your project by default. They are meant to be consistent across projects.
 
 Every visual component should have its folder. Vue components, composables and directives have folders within resources/js/. The folder name for a component should match the blockName, in lowerCamelCase, as should the naming of example HTML files.
 
-
 ### Naming Conventions
 
 Pronto uses SCSS for all styles, and uses ABEM for class naming:
@@ -34,13 +33,14 @@ Pronto uses SCSS for all styles, and uses ABEM for class naming:
 #### Custom Properties
 
 Custom property names should use the following naming convention:
+
 ```
 --prefix-property-name-suffix
 ```
 
-* Root level custom properties are prefixed with `--root-` and are not meant to overridden by components.
-* Properties that are meant to be overridden should be unprefixed (like `--accent-color`, `--gap`, `--size`)
-* Private, component specific properties should be prefixed with the component name in kebab-case (`--cell-span`)
+- Root level custom properties are prefixed with `--root-` and are not meant to overridden by components.
+- Properties that are meant to be overridden should be unprefixed (like `--accent-color`, `--gap`, `--size`)
+- Private, component specific properties should be prefixed with the component name in kebab-case (`--cell-span`)
 
 #### Vue files
 
@@ -50,9 +50,9 @@ PComponentName.vue
 useComposableName.js
 ```
 
-* Vue directive files should be named in UpperCamelCase and prefixed with 'v'. *Example: vDirectionals.js.*
-* Pronto's Vue components should be prefixed with P and follow Vue naming conventions. Other components do not need to use the P prefix. *Example: PAccordion.vue.*
-* Vue composables only need to follow Vue naming conventions.
+- Vue directive files should be named in UpperCamelCase and prefixed with 'v'. _Example: vDirectionals.js._
+- Pronto's Vue components should be prefixed with P and follow Vue naming conventions. Other components do not need to use the P prefix. _Example: PAccordion.vue._
+- Vue composables only need to follow Vue naming conventions.
 
 ## Goals
 
diff --git a/resources/index.md b/resources/index.md
index c631282..7e76668 100644
--- a/resources/index.md
+++ b/resources/index.md
@@ -1,4 +1,5 @@
 # Great!
+
 ## Let's Get Started.
 
 ##### You're running Pronto, Imarc's front-end framework.
diff --git a/resources/js/components/PAccordion.vue b/resources/js/components/PAccordion.vue
index e443a7e..7d54eed 100644
--- a/resources/js/components/PAccordion.vue
+++ b/resources/js/components/PAccordion.vue
@@ -5,12 +5,12 @@ import { useTemplateRef } from 'vue'
  * PAccordion is a vue component for the <details> element. It uses the native <details> element
  * state to determine whether it's open or closed, and merely handles updating CSS properties
  * to allow the element to use transitions between dynamic closed and [open] heights.
- * 
+ *
  * @param {string} summary - selector for the summary element.
  *                           Default: 'summary:first-of-type'
  */
 const props = defineProps({
-  summary: { type: String, default: 'summary:first-of-type' }
+  summary: { type: String, default: 'summary:first-of-type' },
 })
 const details = useTemplateRef('details')
 
diff --git a/resources/js/components/PLazy.vue b/resources/js/components/PLazy.vue
index 222ce5c..4e5661f 100644
--- a/resources/js/components/PLazy.vue
+++ b/resources/js/components/PLazy.vue
@@ -1,57 +1,57 @@
 <script setup>
-  import { computed, ref, nextTick, useTemplateRef } from 'vue'
+import { computed, ref, nextTick, useTemplateRef } from 'vue'
 
-  /**
-   * PLazy is a vue component that lazy loads its content after it's been clicked.
-   *
-   * @slot default - the content to lazyload. It will remove inert attributes, change data-src
-   *                 attributes to src attributes, and call .load() on videos.
-   * @slot placeholder - the content to display before it's lazyloaded. The following properties
-   *                     are exposed to this slot:
-   *       load {function} - function to call to load the content.
-   *       loaded {boolean} - whether the content is loaded or not.
-   *       modifier {string} - either '-loaded' or '' based on loaded.
-   */
+/**
+ * PLazy is a vue component that lazy loads its content after it's been clicked.
+ *
+ * @slot default - the content to lazyload. It will remove inert attributes, change data-src
+ *                 attributes to src attributes, and call .load() on videos.
+ * @slot placeholder - the content to display before it's lazyloaded. The following properties
+ *                     are exposed to this slot:
+ *       load {function} - function to call to load the content.
+ *       loaded {boolean} - whether the content is loaded or not.
+ *       modifier {string} - either '-loaded' or '' based on loaded.
+ */
 
-  const loaded = ref(false)
-  const content = useTemplateRef('content')
-  const modifier = computed(() => loaded.value ? '-loaded' : '')
+const loaded = ref(false)
+const content = useTemplateRef('content')
+const modifier = computed(() => (loaded.value ? '-loaded' : ''))
 
-  const load = async () => {
-    if (loaded.value) return
+const load = async () => {
+  if (loaded.value) return
 
-    await nextTick()
+  await nextTick()
 
-    const promises = []
+  const promises = []
 
-    /* Change data-src attributes to src attributes */
-    content.value.querySelectorAll('[data-src]')
-      .forEach(element => element.setAttribute('src', element.dataset.src))
+  /* Change data-src attributes to src attributes */
+  content.value.querySelectorAll('[data-src]').forEach(element => element.setAttribute('src', element.dataset.src))
 
-    /* remove inert attribute */
-    content.value.querySelectorAll('[inert]')
-      .forEach(element => element.inert = false)
+  /* remove inert attribute */
+  content.value.querySelectorAll('[inert]').forEach(element => (element.inert = false))
 
-    /* load videos */
-    content.value.querySelectorAll('video')
-      .forEach(element => {
-        element.load()
-        promises.push(new Promise(resolve => {
-          element.addEventListener('loadeddata', resolve, { once: true })
-        }))
-      })
+  /* load videos */
+  content.value.querySelectorAll('video').forEach(element => {
+    element.load()
+    promises.push(
+      new Promise(resolve => {
+        element.addEventListener('loadeddata', resolve, { once: true })
+      }),
+    )
+  })
 
-    /* load iframes */
-    content.value.querySelectorAll('iframe')
-      .forEach(element => {
-        promises.push(new Promise(resolve => {
-          element.addEventListener('load', resolve, { once: true })
-        }))
-      })
+  /* load iframes */
+  content.value.querySelectorAll('iframe').forEach(element => {
+    promises.push(
+      new Promise(resolve => {
+        element.addEventListener('load', resolve, { once: true })
+      }),
+    )
+  })
 
-    /* wait for all videos and iframes to load, then update loaded.value */
-    Promise.all(promises).then(() => loaded.value = true)
-  }
+  /* wait for all videos and iframes to load, then update loaded.value */
+  Promise.all(promises).then(() => (loaded.value = true))
+}
 </script>
 
 <template>
diff --git a/resources/js/components/POpenable.vue b/resources/js/components/POpenable.vue
index d221f8d..656480f 100644
--- a/resources/js/components/POpenable.vue
+++ b/resources/js/components/POpenable.vue
@@ -1,5 +1,5 @@
 <script>
-  const openableGroups = {}
+const openableGroups = {}
 </script>
 
 <script setup>
@@ -7,18 +7,11 @@ import { ref, nextTick, useSlots, useTemplateRef } from 'vue'
 
 import focusableElements from '../composables/FocusableElements.js'
 
-const {
-  closeOnBlur,
-  refocus,
-  label,
-  name,
-  openOnHover,
-  hoverOrClick
-} = defineProps({
+const { closeOnBlur, refocus, label, name, openOnHover, hoverOrClick } = defineProps({
   closeOnBlur: { type: Boolean, default: true },
   refocus: { type: Boolean, default: true },
-  label: { type: String, default: "" },
-  name: { type: String, default: "global" },
+  label: { type: String, default: '' },
+  name: { type: String, default: 'global' },
   openOnHover: { type: Boolean, default: false },
   hoverOrClick: { type: Boolean, default: false },
 })
@@ -43,7 +36,7 @@ const pressEscape = evt => {
 
 let escapeHandler = null
 
-const updateGroup = (open) => {
+const updateGroup = open => {
   if (!name) {
     return
   }
@@ -92,7 +85,6 @@ const toggle = (evt, { noFocus = false } = {}) => {
   })
 }
 
-
 let timeout = null
 
 const mouseover = () => {
@@ -128,17 +120,17 @@ const keypress = evt => {
 let bindings = { click: toggle }
 if (openOnHover) {
   bindings = { mouseover, mouseout, keypress }
-} if (hoverOrClick) {
+}
+if (hoverOrClick) {
   bindings = { click: toggle, mouseover, mouseout }
 }
-
 </script>
 
 <template>
   <button v-bind="$attrs" ref="button" v-on="bindings">
     <slot name="toggle" v-bind="bindings">{{ label }}</slot>
   </button>
-  <div ref="openable" v-on="(openOnHover || hoverOrClick) ? { mouseover, mouseout } : {}">
+  <div ref="openable" v-on="openOnHover || hoverOrClick ? { mouseover, mouseout } : {}">
     <slot v-if="open" v-bind="bindings" />
   </div>
 </template>
diff --git a/resources/js/components/PSlider.vue b/resources/js/components/PSlider.vue
index f9fde9f..71115d7 100644
--- a/resources/js/components/PSlider.vue
+++ b/resources/js/components/PSlider.vue
@@ -1,17 +1,17 @@
 <script setup>
-  import { register } from 'swiper/element/bundle'
-  import { computed, ref, useTemplateRef, watchEffect } from 'vue'
+import { register } from 'swiper/element/bundle'
+import { computed, ref, useTemplateRef, watchEffect } from 'vue'
 
-  register()
+register()
 
-  const swiper = ref(null)
-  const slides = ref([])
-  const swiperEl = useTemplateRef('swiper')
+const swiper = ref(null)
+const slides = ref([])
+const swiperEl = useTemplateRef('swiper')
 
-  const init = e => {
-    slides.value = e.target.swiper?.slides
-    console.log(e.target, e.target?.swiper, swiperEl.value)
-  }
+const init = e => {
+  slides.value = e.target.swiper?.slides
+  console.log(e.target, e.target?.swiper, swiperEl.value)
+}
 </script>
 <template>
   <swiper-container ref="swiper" v-bind="$attrs" @swiperafterinit="init">
diff --git a/resources/js/components/PTabs.vue b/resources/js/components/PTabs.vue
index 3cbb86f..93e8d74 100644
--- a/resources/js/components/PTabs.vue
+++ b/resources/js/components/PTabs.vue
@@ -1,44 +1,46 @@
 <script setup>
-  import { computed, ref, useTemplateRef, isRef, isReactive, watchEffect } from 'vue'
-  import focusWithArrows from '/resources/js/composables/focusWithArrows'
+import { computed, ref, useTemplateRef, isRef, isReactive, watchEffect } from 'vue'
+import focusWithArrows from '/resources/js/composables/focusWithArrows'
 
-  const props = defineProps({
-    titles: { type: Array, required: true },
-  })
+const props = defineProps({
+  titles: { type: Array, required: true },
+})
 
-  const tablist = useTemplateRef('tablist')
-  const visibleTab = ref(0)
+const tablist = useTemplateRef('tablist')
+const visibleTab = ref(0)
 
-  const focusedElement = focusWithArrows(tablist)
+const focusedElement = focusWithArrows(tablist)
 
-  watchEffect(() => {
-    if (focusedElement.value) {
-      visibleTab.value = tablist.value.indexOf(focusedElement.value)
-    }
-  })
+watchEffect(() => {
+  if (focusedElement.value) {
+    visibleTab.value = tablist.value.indexOf(focusedElement.value)
+  }
+})
 
-  const tabs = computed(() => props.titles.map((title, i) => ({
+const tabs = computed(() =>
+  props.titles.map((title, i) => ({
     title,
     selected: i === visibleTab.value,
     tabindex: i === visibleTab.value ? 0 : -1,
 
     buttonId: `tab-${i + 1}`,
     panelId: `tabpanel-${i + 1}`,
-  })))
+  })),
+)
 
-  const prev = () => {
-    const selected = tabs.value.findIndex(e => e.selected)
-    if (selected) {
-      focusedElement.value = tablist.value[selected - 1]
-    }
+const prev = () => {
+  const selected = tabs.value.findIndex(e => e.selected)
+  if (selected) {
+    focusedElement.value = tablist.value[selected - 1]
   }
+}
 
-  const next = () => {
-    const selected = tabs.value.findIndex(e => e.selected)
-    if (selected < tabs.value.length) {
-      focusedElement.value = tablist.value[selected + 1]
-    }
+const next = () => {
+  const selected = tabs.value.findIndex(e => e.selected)
+  if (selected < tabs.value.length) {
+    focusedElement.value = tablist.value[selected + 1]
   }
+}
 </script>
 
 <template>
@@ -48,33 +50,14 @@
         <span class="srOnly">previous</span>
         <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
       </button>
-      <button
-        class="tabs__button"
-        :class="{ '-selected': tab.selected }"
-        v-for="tab in tabs"
-        role="tab"
-        :aria-selected="tab.selected"
-        :aria-controls="tab.panelId"
-        :id="tab.buttonId"
-        ref="tablist"
-        :tabindex="tab.tabindex"
-        v-text="tab.title"
-      ></button>
+      <button class="tabs__button" :class="{ '-selected': tab.selected }" v-for="tab in tabs" role="tab" :aria-selected="tab.selected" :aria-controls="tab.panelId" :id="tab.buttonId" ref="tablist" :tabindex="tab.tabindex" v-text="tab.title"></button>
       <button class="tabs__next button -circle" @click="next">
         <span class="srOnly">next</span>
         <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
       </button>
     </div>
 
-    <div
-        class="tabs__panel"
-        v-for="tab in tabs"
-        role="tabpanel"
-        :tabindex="tab.tabindex"
-        :id="tab.panelId"
-        :aria-labelledby="tab.buttonId"
-        :hidden="!tab.selected"
-      >
+    <div class="tabs__panel" v-for="tab in tabs" role="tabpanel" :tabindex="tab.tabindex" :id="tab.panelId" :aria-labelledby="tab.buttonId" :hidden="!tab.selected">
       <slot :name="tab.panelId" />
     </div>
   </div>
diff --git a/resources/js/components/PWistia.vue b/resources/js/components/PWistia.vue
index 4db86c1..662293c 100644
--- a/resources/js/components/PWistia.vue
+++ b/resources/js/components/PWistia.vue
@@ -1,26 +1,26 @@
 <script setup>
-  import { computed, ref, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 
-  const mediaEl = useTemplateRef('video')
-  const loaded = ref(false)
-  const modifier = computed(() => loaded.value ? '-loaded' : '')
+const mediaEl = useTemplateRef('video')
+const loaded = ref(false)
+const modifier = computed(() => (loaded.value ? '-loaded' : ''))
 
-  const playPause = () => {
-    loaded.value = true
+const playPause = () => {
+  loaded.value = true
 
-    const iframe = mediaEl.value.querySelector('iframe')
-    if (iframe && iframe.getAttribute('tabindex') === -1) {
-      iframe.removeAttribute('tabindex')
-    }
+  const iframe = mediaEl.value.querySelector('iframe')
+  if (iframe && iframe.getAttribute('tabindex') === -1) {
+    iframe.removeAttribute('tabindex')
+  }
 
-    // Try to use Wistia API if available
-    if (window.Wistia && iframe) {
-      const wistiaEmbed = window.Wistia.api(iframe)
-      if (wistiaEmbed) {
-        wistiaEmbed.play()
-      }
+  // Try to use Wistia API if available
+  if (window.Wistia && iframe) {
+    const wistiaEmbed = window.Wistia.api(iframe)
+    if (wistiaEmbed) {
+      wistiaEmbed.play()
     }
   }
+}
 </script>
 
 <template>
@@ -35,4 +35,3 @@ div {
   container-type: size;
 }
 </style>
-
diff --git a/resources/js/components/PYouTube.vue b/resources/js/components/PYouTube.vue
index 7415644..4335bd0 100644
--- a/resources/js/components/PYouTube.vue
+++ b/resources/js/components/PYouTube.vue
@@ -1,47 +1,47 @@
 <script>
-  import { ref, useTemplateRef } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 
-  const YT_API_LOADED = ref(false)
+const YT_API_LOADED = ref(false)
 
-  window.onYouTubeIframeAPIReady = () => YT_API_LOADED.value = true
+window.onYouTubeIframeAPIReady = () => (YT_API_LOADED.value = true)
 </script>
 
 <script setup>
-  import { computed, onMounted, ref, useTemplateRef, watchEffect } from 'vue'
-
-  let player = null
-  const mediaEl = useTemplateRef('video')
-  const mounted = ref(false)
-  const loaded = ref(false)
-  const modifier = computed(() => loaded.value ? '-loaded' : '')
-
-  if (typeof window?.YT?.Player === 'undefined') {
-    const yt = document.createElement('script')
-    yt.src = 'https://www.youtube.com/iframe_api'
-    document.body.append(yt)
+import { computed, onMounted, ref, useTemplateRef, watchEffect } from 'vue'
+
+let player = null
+const mediaEl = useTemplateRef('video')
+const mounted = ref(false)
+const loaded = ref(false)
+const modifier = computed(() => (loaded.value ? '-loaded' : ''))
+
+if (typeof window?.YT?.Player === 'undefined') {
+  const yt = document.createElement('script')
+  yt.src = 'https://www.youtube.com/iframe_api'
+  document.body.append(yt)
+}
+
+onMounted(() => (mounted.value = true))
+watchEffect(() => {
+  if (mounted.value && YT_API_LOADED.value) {
+    player = new YT.Player(mediaEl.value.querySelector('iframe'))
+  }
+})
+
+const playPause = () => {
+  loaded.value = true
+
+  const iframe = mediaEl.value.querySelector('iframe')
+  if (iframe.getAttribute('tabindex') == -1) {
+    iframe.removeAttribute('tabindex')
   }
 
-  onMounted(() => mounted.value = true)
-  watchEffect(() => {
-    if (mounted.value && YT_API_LOADED.value) {
-      player = new YT.Player(mediaEl.value.querySelector('iframe'))
-    }
-  })
-
-  const playPause = () => {
-    loaded.value = true
-
-    const iframe = mediaEl.value.querySelector('iframe')
-    if (iframe.getAttribute('tabindex') == -1) {
-      iframe.removeAttribute('tabindex')
-    }
-
-    if (player.getPlayerState() === 1) {
-      player.pauseVideo()
-    } else {
-      player.playVideo()
-    }
+  if (player.getPlayerState() === 1) {
+    player.pauseVideo()
+  } else {
+    player.playVideo()
   }
+}
 </script>
 
 <template>
diff --git a/resources/js/components/PYouTubePlaylist.vue b/resources/js/components/PYouTubePlaylist.vue
index f8758dc..7618eff 100644
--- a/resources/js/components/PYouTubePlaylist.vue
+++ b/resources/js/components/PYouTubePlaylist.vue
@@ -1,18 +1,18 @@
 <script setup>
-  import { computed, ref, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 
-  const mediaEl = useTemplateRef('video')
-  const loaded = ref(false)
-  const modifier = computed(() => loaded.value ? '-loaded' : '')
+const mediaEl = useTemplateRef('video')
+const loaded = ref(false)
+const modifier = computed(() => (loaded.value ? '-loaded' : ''))
 
-  const playPause = () => {
-    loaded.value = true
+const playPause = () => {
+  loaded.value = true
 
-    const iframe = mediaEl.value.querySelector('iframe')
-    if (iframe && iframe.getAttribute('tabindex') === -1) {
-      iframe.removeAttribute('tabindex')
-    }
+  const iframe = mediaEl.value.querySelector('iframe')
+  if (iframe && iframe.getAttribute('tabindex') === -1) {
+    iframe.removeAttribute('tabindex')
   }
+}
 </script>
 
 <template>
@@ -29,4 +29,3 @@
   container-type: size;
 }
 </style>
-
diff --git a/resources/js/composables/UseDirectionalKeys.js b/resources/js/composables/UseDirectionalKeys.js
index cd2cfae..7347392 100644
--- a/resources/js/composables/UseDirectionalKeys.js
+++ b/resources/js/composables/UseDirectionalKeys.js
@@ -77,7 +77,7 @@ const augmentElementRects = (nodeList, origin) => {
  * focusable elements and handles directional arrow moves between. Also
  * supports Home and End.
  */
-export default function useDirectionalKeys (element) {
+export default function useDirectionalKeys(element) {
   const findTarget = (el, key) => {
     const elements = augmentElementRects(focusableElements(element), el)
     if (key in KEY_FILTERS) {
@@ -85,7 +85,7 @@ export default function useDirectionalKeys (element) {
         (closest, el) => {
           return el.distance < closest.distance ? el : closest
         },
-        { distance: Infinity }
+        { distance: Infinity },
       )
     }
     return null
diff --git a/resources/js/composables/focusWithArrows.js b/resources/js/composables/focusWithArrows.js
index 52072d0..993f5c3 100644
--- a/resources/js/composables/focusWithArrows.js
+++ b/resources/js/composables/focusWithArrows.js
@@ -1,12 +1,6 @@
 import { ref, toValue, watchEffect } from 'vue'
 
-export default function focusWithArrows(
-  elements,
-  {
-    includeHomeEnd = true,
-  } = {}
-) {
-
+export default function focusWithArrows(elements, { includeHomeEnd = true } = {}) {
   const KEY_BEHAVIORS = {
     ArrowLeft: i => Math.max(0, i - 1),
     ArrowRight: i => Math.min(handledElements.length - 1, i + 1),
@@ -32,13 +26,13 @@ export default function focusWithArrows(
   const handledElements = []
 
   watchEffect(() => {
-    (toValue(elements) || [])
+    ;(toValue(elements) || [])
       .filter(elem => !handledElements.includes(elem))
       .forEach(elem => {
         elem.addEventListener('keydown', handleKeydown)
         elem.addEventListener('focus', event => {
           focus.value = event.target
-          event.target.addEventListener('blur', () => focus.value = null, { once: true })
+          event.target.addEventListener('blur', () => (focus.value = null), { once: true })
         })
         handledElements.push(elem)
 
diff --git a/resources/js/directives/vDirectionals.js b/resources/js/directives/vDirectionals.js
index 4c620cb..1e89c80 100644
--- a/resources/js/directives/vDirectionals.js
+++ b/resources/js/directives/vDirectionals.js
@@ -19,7 +19,7 @@ const KEY_BINDINGS = {
  */
 const getElementRects = el => {
   if (!el) {
-    console.error("Unable to determine location of element", el);
+    console.error('Unable to determine location of element', el)
     return null
   }
 
@@ -78,7 +78,7 @@ const findTarget = (el, key, root) => {
       (closest, el) => {
         return el.distance < closest.distance ? el : closest
       },
-      { distance: Infinity }
+      { distance: Infinity },
     )
 
     return el
diff --git a/resources/styles/atoms/breadcrumbs/index.scss b/resources/styles/atoms/breadcrumbs/index.scss
index 5a79711..0a833db 100644
--- a/resources/styles/atoms/breadcrumbs/index.scss
+++ b/resources/styles/atoms/breadcrumbs/index.scss
@@ -2,7 +2,7 @@
   $b: &;
   --accent-color: var(--link-color, var(--color-blue));
 
-  font-size: .75rem;
+  font-size: 0.75rem;
 
   &__list {
     list-style: none;
@@ -10,13 +10,13 @@
     gap: 1em;
   }
 
-  &__item:nth-child(n+2) {
+  &__item:nth-child(n + 2) {
     &::before {
       display: inline grid;
       content: '';
       background: var(--color-gray-300);
       aspect-ratio: 1;
-      height: .75em;
+      height: 0.75em;
       mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 36'%3E%3Cpath d='M2 2L18 18L2 34' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
     }
   }
@@ -24,7 +24,7 @@
   &__link {
     --accent-color: inherit;
     align-items: normal;
-    gap: .5rem;
+    gap: 0.5rem;
   }
 
   &__item {
@@ -34,6 +34,6 @@
   }
 
   &__icon {
-    height: .875rem;
+    height: 0.875rem;
   }
 }
diff --git a/resources/styles/atoms/button/button--icon.html b/resources/styles/atoms/button/button--icon.html
index f43691c..630508e 100644
--- a/resources/styles/atoms/button/button--icon.html
+++ b/resources/styles/atoms/button/button--icon.html
@@ -1,18 +1,18 @@
 <div class="actions">
   <button class="button -square">
-      <span class="srOnly">up</span>
-      <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-up" /></svg>
+    <span class="srOnly">up</span>
+    <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-up" /></svg>
   </button>
   <button class="button -square -outline">
-      <span class="srOnly">down</span>
-      <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-down" /></svg>
+    <span class="srOnly">down</span>
+    <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-down" /></svg>
   </button>
   <button class="button -circle">
-      <span class="srOnly">left</span>
-      <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
+    <span class="srOnly">left</span>
+    <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
   </button>
   <button class="button -circle -ghost">
-      <span class="srOnly">right</span>
-      <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
+    <span class="srOnly">right</span>
+    <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
   </button>
 </div>
diff --git a/resources/styles/atoms/button/button--messaging.html b/resources/styles/atoms/button/button--messaging.html
index aac731b..7175d49 100644
--- a/resources/styles/atoms/button/button--messaging.html
+++ b/resources/styles/atoms/button/button--messaging.html
@@ -35,4 +35,3 @@
   <button class="button -outline-fill accent-black">Black</button>
   <button class="button -ghost accent-black">Black</button>
 </div>
-
diff --git a/resources/styles/atoms/button/button-on-primary.html b/resources/styles/atoms/button/button-on-primary.html
index 14ce30a..ef9db73 100644
--- a/resources/styles/atoms/button/button-on-primary.html
+++ b/resources/styles/atoms/button/button-on-primary.html
@@ -1,4 +1,4 @@
-<div style="background: var(--accent-color); padding: 1rem;">
+<div style="background: var(--accent-color); padding: 1rem">
   <div class="actions">
     <button class="button error">Error</button>
     <button class="button -outline error">Error</button>
diff --git a/resources/styles/atoms/button/button.html b/resources/styles/atoms/button/button.html
index cf644d0..870e469 100644
--- a/resources/styles/atoms/button/button.html
+++ b/resources/styles/atoms/button/button.html
@@ -1,8 +1,8 @@
 <div class="actions">
   <button class="button">Button</button>
   <button class="button">
-      <svg class="button__icon"><use href="/main-icons-sprite.svg#layers" /></svg>
-      Button
+    <svg class="button__icon"><use href="/main-icons-sprite.svg#layers" /></svg>
+    Button
   </button>
   <button disabled class="button">Button</button>
 </div>
@@ -12,8 +12,8 @@ <h5>.-outline</h5>
 <div class="actions">
   <button class="button -outline">Button</button>
   <button class="button -outline">
-      Button
-      <svg class="button__icon"><use href="/main-icons-sprite.svg#layers" /></svg>
+    Button
+    <svg class="button__icon"><use href="/main-icons-sprite.svg#layers" /></svg>
   </button>
   <button disabled class="button -outline">Button</button>
 </div>
@@ -23,8 +23,8 @@ <h5>.-outline-fill</h5>
 <div class="actions">
   <button class="button -outline-fill">Button</button>
   <button class="button -outline-fill">
-      Button
-      <svg class="button__icon"><use href="/main-icons-sprite.svg#layers" /></svg>
+    Button
+    <svg class="button__icon"><use href="/main-icons-sprite.svg#layers" /></svg>
   </button>
   <button disabled class="button -outline-fill">Button</button>
 </div>
@@ -34,8 +34,8 @@ <h5>.-ghost</h5>
 <div class="actions">
   <button class="button -ghost">Button</button>
   <button class="button -ghost">
-      <svg class="button__icon"><use href="/main-icons-sprite.svg#layers" /></svg>
-      Button
+    <svg class="button__icon"><use href="/main-icons-sprite.svg#layers" /></svg>
+    Button
   </button>
   <button disabled class="button -ghost">Button</button>
 </div>
diff --git a/resources/styles/atoms/button/index.scss b/resources/styles/atoms/button/index.scss
index 9d81ae1..c6f1b0b 100644
--- a/resources/styles/atoms/button/index.scss
+++ b/resources/styles/atoms/button/index.scss
@@ -13,12 +13,14 @@
   line-height: 1;
   padding: calc(1em - var(--root-border-width)) calc(2em - var(--root-border-width));
   text-decoration: none;
-  transition: background var(--root-ease-out-fast), border-color var(--root-ease-out-fast);
+  transition:
+    background var(--root-ease-out-fast),
+    border-color var(--root-ease-out-fast);
 
   &__icon {
     width: 1em;
     height: 1em;
-    margin: -.25em 0;
+    margin: -0.25em 0;
 
     &.-large {
       width: 2em;
@@ -33,7 +35,7 @@
     border-color: var(--accent-color-700);
   }
 
-  &[aria-disabled="true"],
+  &[aria-disabled='true'],
   &[disabled],
   &.-disabled {
     --accent-color: var(--root-background-color-inactive);
diff --git a/resources/styles/atoms/checkbox/checkbox.html b/resources/styles/atoms/checkbox/checkbox.html
index 4e0aced..6d951cd 100644
--- a/resources/styles/atoms/checkbox/checkbox.html
+++ b/resources/styles/atoms/checkbox/checkbox.html
@@ -1,20 +1,19 @@
 <label class="field -inline" for="checkbox-default">
-  <input class="checkbox" type="checkbox" id="checkbox-default">
+  <input class="checkbox" type="checkbox" id="checkbox-default" />
   Checkbox
 </label>
 
 <label class="field -inline" for="checkbox-checked">
-  <input class="checkbox" type="checkbox" checked id="checkbox-checked">
+  <input class="checkbox" type="checkbox" checked id="checkbox-checked" />
   Checked
 </label>
 
 <label class="field -inline" for="checkbox-disabled">
-  <input class="checkbox" type="checkbox" disabled id="checkbox-disabled">
+  <input class="checkbox" type="checkbox" disabled id="checkbox-disabled" />
   Disabled
 </label>
 
 <label class="field -inline" for="checkbox-checked-disabled">
-  <input class="checkbox" type="checkbox" checked disabled id="checkbox-checked-disabled">
+  <input class="checkbox" type="checkbox" checked disabled id="checkbox-checked-disabled" />
   Checked Disabled
 </label>
-
diff --git a/resources/styles/atoms/checkbox/index.scss b/resources/styles/atoms/checkbox/index.scss
index ba0ebc6..0b0b72b 100644
--- a/resources/styles/atoms/checkbox/index.scss
+++ b/resources/styles/atoms/checkbox/index.scss
@@ -1,4 +1,4 @@
-:where(input[type=checkbox]),
+:where(input[type='checkbox']),
 .checkbox {
   appearance: none;
   background: var(--color-gray-50);
@@ -6,7 +6,9 @@
   border: 2px solid var(--color-gray-500);
   display: inline grid;
   height: 1.5em;
-  transition: background var(--root-ease-out-fast), border-color var(--root-ease-out-fast);
+  transition:
+    background var(--root-ease-out-fast),
+    border-color var(--root-ease-out-fast);
   width: 1.5em;
 
   &::before {
diff --git a/resources/styles/atoms/dropdown/dropdown.html b/resources/styles/atoms/dropdown/dropdown.html
index a327230..fad6534 100644
--- a/resources/styles/atoms/dropdown/dropdown.html
+++ b/resources/styles/atoms/dropdown/dropdown.html
@@ -4,13 +4,14 @@
     <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#chevron-down" /></svg>
   </template>
   <template id="default">
-      <div class="dropdown" v-directionals>
-        <ul class="dropdown__list">
-          <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
-          <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
-          <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-          <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
-        </ul>
-      </div>
+    <div class="dropdown" v-directionals>
+      <ul class="dropdown__list">
+        <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
+        <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
+        <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
+        <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+        <li></li>
+      </ul>
+    </div>
   </template>
 </p-openable>
diff --git a/resources/styles/atoms/dropdown/index.scss b/resources/styles/atoms/dropdown/index.scss
index 53d0580..126b291 100644
--- a/resources/styles/atoms/dropdown/index.scss
+++ b/resources/styles/atoms/dropdown/index.scss
@@ -1,4 +1,4 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .dropdown {
   background: #fff;
@@ -22,7 +22,7 @@
     color: var(--accent-color);
     display: block;
     font-weight: 700;
-    padding: .5rem 0;
+    padding: 0.5rem 0;
   }
 
   &__item {
@@ -35,15 +35,15 @@
 
   &__button {
     display: flex;
-    gap: .5rem;
+    gap: 0.5rem;
     justify-content: space-between;
     width: 100%;
   }
 
   &.-toRight {
     left: 100%;
-    top: -.75rem;
-    padding-top: .75rem;
+    top: -0.75rem;
+    padding-top: 0.75rem;
   }
 
   &.-center {
diff --git a/resources/styles/atoms/eyebrow/index.scss b/resources/styles/atoms/eyebrow/index.scss
index 2ccce86..569dcc6 100644
--- a/resources/styles/atoms/eyebrow/index.scss
+++ b/resources/styles/atoms/eyebrow/index.scss
@@ -8,9 +8,9 @@
 
   &.-fill {
     background: var(--accent-color);
-    border-radius: .25em;
+    border-radius: 0.25em;
     color: var(--accent-color-text);
-    font-size: .75rem;
-    padding: .25em 1.5em;
+    font-size: 0.75rem;
+    padding: 0.25em 1.5em;
   }
 }
diff --git a/resources/styles/atoms/heading/index.scss b/resources/styles/atoms/heading/index.scss
index 4e233f5..db2d051 100644
--- a/resources/styles/atoms/heading/index.scss
+++ b/resources/styles/atoms/heading/index.scss
@@ -1,4 +1,4 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
   --accent-color: var(--heading-color, var(--root-color-headings));
@@ -16,29 +16,35 @@
   }
 }
 
-h1, .h1 {
+h1,
+.h1 {
   font-size: var(--root-font-size-h1);
   margin-bottom: #{fluid-rems(1, 1.5, 2)};
 }
 
-h2, .h2 {
+h2,
+.h2 {
   font-size: var(--root-font-size-h2);
   margin-bottom: #{fluid-rems(1, 1.5, 1.5)};
 }
 
-h3, .h3 {
+h3,
+.h3 {
   font-size: var(--root-font-size-h3);
 }
 
-h4, .h4 {
+h4,
+.h4 {
   font-size: var(--root-font-size-h4);
 }
 
-h5, .h5 {
+h5,
+.h5 {
   font-size: var(--root-font-size-h5);
 }
 
-h6, .h6 {
+h6,
+.h6 {
   font-size: var(--root-font-size-h6);
   font-weight: 700;
 }
diff --git a/resources/styles/atoms/icon/icon.html b/resources/styles/atoms/icon/icon.html
index f42be31..067086b 100644
--- a/resources/styles/atoms/icon/icon.html
+++ b/resources/styles/atoms/icon/icon.html
@@ -1,122 +1,121 @@
-  <div style="display: grid; grid: 2rem / repeat(auto-fit, 2rem minmax(10rem, 1fr)); gap: 1rem .5rem">
+<div style="display: grid; grid: 2rem / repeat(auto-fit, 2rem minmax(10rem, 1fr)); gap: 1rem 0.5rem">
+  <svg class="icon"><use href="/main-icons-sprite.svg#arrow-left" /></svg>
+  arrow-left
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#arrow-left" /></svg>
-    arrow-left
+  <svg class="icon"><use href="/main-icons-sprite.svg#arrow-right" /></svg>
+  arrow-right
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#arrow-right" /></svg>
-    arrow-right
+  <svg class="icon"><use href="/main-icons-sprite.svg#bullet-thin" /></svg>
+  bullet-thin
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#bullet-thin" /></svg>
-    bullet-thin
+  <svg class="icon"><use href="/main-icons-sprite.svg#bullet" /></svg>
+  bullet
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#bullet" /></svg>
-    bullet
+  <svg class="icon"><use href="/main-icons-sprite.svg#check" /></svg>
+  check
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#check" /></svg>
-    check
+  <svg class="icon"><use href="/main-icons-sprite.svg#info" /></svg>
+  info
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#info" /></svg>
-    info
+  <svg class="icon"><use href="/main-icons-sprite.svg#error" /></svg>
+  error
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#error" /></svg>
-    error
+  <svg class="icon"><use href="/main-icons-sprite.svg#chevron-down" /></svg>
+  chevron-down
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#chevron-down" /></svg>
-    chevron-down
+  <svg class="icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
+  chevron-left
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
-    chevron-left
+  <svg class="icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
+  chevron-right
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
-    chevron-right
+  <svg class="icon"><use href="/main-icons-sprite.svg#chevron-up" /></svg>
+  chevron-up
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#chevron-up" /></svg>
-    chevron-up
+  <svg class="icon"><use href="/main-icons-sprite.svg#clock" /></svg>
+  clock
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#clock" /></svg>
-    clock
+  <svg class="icon"><use href="/main-icons-sprite.svg#close" /></svg>
+  close
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#close" /></svg>
-    close
+  <svg class="icon"><use href="/main-icons-sprite.svg#facebook" /></svg>
+  facebook
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#facebook" /></svg>
-    facebook
+  <svg class="icon"><use href="/main-icons-sprite.svg#home" /></svg>
+  home
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#home" /></svg>
-    home
+  <svg class="icon"><use href="/main-icons-sprite.svg#instagram" /></svg>
+  instagram
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#instagram" /></svg>
-    instagram
+  <svg class="icon"><use href="/main-icons-sprite.svg#layers" /></svg>
+  layers
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#layers" /></svg>
-    layers
+  <svg class="icon"><use href="/main-icons-sprite.svg#linkedin" /></svg>
+  linkedin
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#linkedin" /></svg>
-    linkedin
+  <svg class="icon"><use href="/main-icons-sprite.svg#minus" /></svg>
+  minus
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#minus" /></svg>
-    minus
+  <svg class="icon"><use href="/main-icons-sprite.svg#play" /></svg>
+  play
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#play" /></svg>
-    play
+  <svg class="icon"><use href="/main-icons-sprite.svg#quote" /></svg>
+  quote
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#quote" /></svg>
-    quote
+  <svg class="icon"><use href="/main-icons-sprite.svg#search" /></svg>
+  search
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#search" /></svg>
-    search
+  <svg class="icon"><use href="/main-icons-sprite.svg#tag" /></svg>
+  tag
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#tag" /></svg>
-    tag
+  <svg class="icon"><use href="/main-icons-sprite.svg#x" /></svg>
+  x
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#x" /></svg>
-    x
+  <svg class="icon"><use href="/main-icons-sprite.svg#youtube" /></svg>
+  youtube
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#youtube" /></svg>
-    youtube
+  <svg class="icon"><use href="/main-icons-sprite.svg#date" /></svg>
+  date
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#date" /></svg>
-    date
+  <svg class="icon"><use href="/main-icons-sprite.svg#location" /></svg>
+  location
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#location" /></svg>
-    location
+  <svg class="icon"><use href="/main-icons-sprite.svg#bars" /></svg>
+  bars
 
-    <svg class="icon"><use href="/main-icons-sprite.svg#bars" /></svg>
-    bars
+  <svg class="icon -circle"><use href="/main-icons-sprite.svg#check" /></svg>
+  check.-circle
 
-    <svg class="icon -circle"><use href="/main-icons-sprite.svg#check" /></svg>
-    check.-circle
+  <svg class="icon -circle"><use href="/main-icons-sprite.svg#minus" /></svg>
+  minus.-circle
 
-    <svg class="icon -circle"><use href="/main-icons-sprite.svg#minus" /></svg>
-    minus.-circle
+  <svg class="icon -circle"><use href="/main-icons-sprite.svg#play" /></svg>
+  play.-circle
 
-    <svg class="icon -circle"><use href="/main-icons-sprite.svg#play" /></svg>
-    play.-circle
+  <svg class="icon -circle"><use href="/main-icons-sprite.svg#chevron-down" /></svg>
+  chevron-down.-circle
 
-    <svg class="icon -circle"><use href="/main-icons-sprite.svg#chevron-down" /></svg>
-    chevron-down.-circle
+  <svg class="icon -circle success"><use href="/main-icons-sprite.svg#check" /></svg>
+  check.-circle.success
 
-    <svg class="icon -circle success"><use href="/main-icons-sprite.svg#check" /></svg>
-    check.-circle.success
+  <svg class="icon -circle info"><use href="/main-icons-sprite.svg#info" /></svg>
+  info.-circle.info
 
-    <svg class="icon -circle info"><use href="/main-icons-sprite.svg#info" /></svg>
-    info.-circle.info
+  <svg class="icon -circle warning"><use href="/main-icons-sprite.svg#error" /></svg>
+  warning.-circle.warning
 
-    <svg class="icon -circle warning"><use href="/main-icons-sprite.svg#error" /></svg>
-    warning.-circle.warning
+  <svg class="icon -circle error"><use href="/main-icons-sprite.svg#error" /></svg>
+  error.-circle.error
 
-    <svg class="icon -circle error"><use href="/main-icons-sprite.svg#error" /></svg>
-    error.-circle.error
+  <svg class="icon -square success"><use href="/main-icons-sprite.svg#check" /></svg>
+  check.-square.success
 
-    <svg class="icon -square success"><use href="/main-icons-sprite.svg#check" /></svg>
-    check.-square.success
+  <svg class="icon -square info"><use href="/main-icons-sprite.svg#info" /></svg>
+  info.-square.info
 
-    <svg class="icon -square info"><use href="/main-icons-sprite.svg#info" /></svg>
-    info.-square.info
+  <svg class="icon -square warning"><use href="/main-icons-sprite.svg#error" /></svg>
+  warning.-square.warning
 
-    <svg class="icon -square warning"><use href="/main-icons-sprite.svg#error" /></svg>
-    warning.-square.warning
-
-    <svg class="icon -square error"><use href="/main-icons-sprite.svg#error" /></svg>
-    error.-square.error
+  <svg class="icon -square error"><use href="/main-icons-sprite.svg#error" /></svg>
+  error.-square.error
 </div>
diff --git a/resources/styles/atoms/icon/index.scss b/resources/styles/atoms/icon/index.scss
index 4724861..81b9a33 100644
--- a/resources/styles/atoms/icon/index.scss
+++ b/resources/styles/atoms/icon/index.scss
@@ -8,11 +8,11 @@
     background: var(--accent-color);
     --icon-color: var(--icon-stroke-color);
     display: inline grid;
-    padding: .3125em;
+    padding: 0.3125em;
   }
 
   &.-square {
-    border-radius: .25em;
+    border-radius: 0.25em;
   }
 
   &.-circle {
diff --git a/resources/styles/atoms/index.scss b/resources/styles/atoms/index.scss
index 039db78..eca7595 100644
--- a/resources/styles/atoms/index.scss
+++ b/resources/styles/atoms/index.scss
@@ -3,19 +3,19 @@
  * they show up in other atoms, and having them included
  * first makes it easier to override the base icon styles.
  */
-@forward "icon";
+@forward 'icon';
 
-@forward "breadcrumbs";
-@forward "button";
-@forward "checkbox";
-@forward "dropdown";
-@forward "eyebrow";
-@forward "heading";
-@forward "input";
-@forward "link";
-@forward "media";
-@forward "radio";
-@forward "search";
-@forward "select";
-@forward "switch";
-@forward "tag";
+@forward 'breadcrumbs';
+@forward 'button';
+@forward 'checkbox';
+@forward 'dropdown';
+@forward 'eyebrow';
+@forward 'heading';
+@forward 'input';
+@forward 'link';
+@forward 'media';
+@forward 'radio';
+@forward 'search';
+@forward 'select';
+@forward 'switch';
+@forward 'tag';
diff --git a/resources/styles/atoms/input/index.scss b/resources/styles/atoms/input/index.scss
index bd0d4ea..f17019e 100644
--- a/resources/styles/atoms/input/index.scss
+++ b/resources/styles/atoms/input/index.scss
@@ -6,7 +6,7 @@
   border: 2px solid var(--accent-color);
   color: var(--color-gray-800);
   display: inline-block;
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   width: 100%;
 
   &:focus {
@@ -18,7 +18,7 @@
     color: var(--color-gray-400);
   }
 
-  &[aria-disabled="true"],
+  &[aria-disabled='true'],
   &[disabled],
   &.-disabled {
     border-color: var(--color-gray-200);
@@ -34,13 +34,12 @@
   }
 
   /* Normalize date input padding to match others. */
-  &[type=date] {
-    padding: calc(.5em - 1px) 1em;
+  &[type='date'] {
+    padding: calc(0.5em - 1px) 1em;
   }
 
-
   /* Normalize file input padding to match others. */
-  &[type=file] {
-    padding: calc(.5em - 3px) 1em;
+  &[type='file'] {
+    padding: calc(0.5em - 3px) 1em;
   }
 }
diff --git a/resources/styles/atoms/input/input.html b/resources/styles/atoms/input/input.html
index 8af87c1..3250fc1 100644
--- a/resources/styles/atoms/input/input.html
+++ b/resources/styles/atoms/input/input.html
@@ -1,24 +1,24 @@
 <div class="field">
-  <input class="input" type="text" value="text field">
+  <input class="input" type="text" value="text field" />
 </div>
 <div class="field">
-  <input disabled class="input" type="text" value="disabled text field">
+  <input disabled class="input" type="text" value="disabled text field" />
 </div>
 
 <div class="field">
-  <input class="input" type="text" placeholder="address@domain.com">
+  <input class="input" type="text" placeholder="address@domain.com" />
 </div>
 <div class="field">
-  <input class="input" type="date">
+  <input class="input" type="date" />
 </div>
 <div class="field">
-  <input class="input" type="password" placeholder="password field">
+  <input class="input" type="password" placeholder="password field" />
 </div>
 <div class="field">
-  <input class="input" type="number" placeholder="number field">
+  <input class="input" type="number" placeholder="number field" />
 </div>
 <div class="field">
-  <input class="input" type="file">
+  <input class="input" type="file" />
 </div>
 
 <div class="field">
@@ -26,7 +26,7 @@
 </div>
 
 <div class="field">
-  <input class="input error" type="text" value="invalid value">
+  <input class="input error" type="text" value="invalid value" />
 </div>
 
 <div class="field">
diff --git a/resources/styles/atoms/link/link.html b/resources/styles/atoms/link/link.html
index 2e5e7bb..dba6f47 100644
--- a/resources/styles/atoms/link/link.html
+++ b/resources/styles/atoms/link/link.html
@@ -1,11 +1,15 @@
-This is a <a href="#">regular link with no class,</a> it is regular. <br>
+This is a <a href="#">regular link with no class,</a> it is regular. <br />
 
 <a class="link" href="#">
   Standalone Text Link
   <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg>
-</a> <br>
+</a>
+<br />
 
-Adipisicing eius quis perferendis dicta aut aliquid Autem pariatur harum nesciunt dicta recusandae. Libero molestiae fugit totam odio cumque commodi. Provident earum quis magni excepturi porro nemo? <a class="link" href="">Praesentium ex architecto <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg></a>
+Adipisicing eius quis perferendis dicta aut aliquid Autem pariatur harum nesciunt dicta recusandae. Libero molestiae fugit totam odio cumque commodi. Provident earum quis magni excepturi porro nemo?
+<a class="link" href=""
+  >Praesentium ex architecto <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg
+></a>
 
 <ul>
   <li>
diff --git a/resources/styles/atoms/media/index.scss b/resources/styles/atoms/media/index.scss
index e51c454..95f7c14 100644
--- a/resources/styles/atoms/media/index.scss
+++ b/resources/styles/atoms/media/index.scss
@@ -1,7 +1,7 @@
 .media {
   $b: &;
 
-  background-color: rgb(from currentColor r g b / .25);
+  background-color: rgb(from currentColor r g b / 0.25);
   display: inline grid;
   margin-bottom: 2rem;
   width: 267px;
@@ -77,7 +77,8 @@
     color: var(--accent-color-200);
     container-type: size;
     position: relative;
-    transition: color var(-root-ease-out-fast),
+    transition:
+      color var(-root-ease-out-fast),
       opacity var(--root-ease-out-moderate);
     width: min(50cqmin, 6rem);
     height: min(50cqmin, 6rem);
@@ -90,14 +91,14 @@
       align-self: start;
       height: min(25cqmin, 3rem);
       justify-self: end;
-      margin: .5rem;
+      margin: 0.5rem;
       opacity: 0;
       pointer-events: none;
       transition: opacity var(--root-ease-out-fast);
       width: min(25cqmin, 3rem);
 
       &.-keepVisible {
-        opacity: .25;
+        opacity: 0.25;
         pointer-events: auto;
       }
 
@@ -115,11 +116,11 @@
     height: auto;
 
     &.-circle {
-      padding: min(6cqmin, .75rem);
+      padding: min(6cqmin, 0.75rem);
       transition: padding var(--root-ease-out-fast);
 
       &:hover {
-        padding: min(4cqmin, .5rem);
+        padding: min(4cqmin, 0.5rem);
       }
     }
   }
diff --git a/resources/styles/atoms/media/media-PWistia.html b/resources/styles/atoms/media/media-PWistia.html
index deb15d7..e53b8fe 100644
--- a/resources/styles/atoms/media/media-PWistia.html
+++ b/resources/styles/atoms/media/media-PWistia.html
@@ -2,9 +2,9 @@
   <p-wistia>
     <template #placeholder="{ playPause, modifier }">
       <picture class="media__mask" :class="modifier">
-        <source srcset="https://unsplash.it/300/150?random&gravity=center" media="(min-width: 768px)">
-        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 480px)">
-        <img class="lazyload" srcset="https://unsplash.it/267/150?random&gravity=center" alt="" width="267" height="150">
+        <source srcset="https://unsplash.it/300/150?random&gravity=center" media="(min-width: 768px)" />
+        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 480px)" />
+        <img class="lazyload" srcset="https://unsplash.it/267/150?random&gravity=center" alt="" width="267" height="150" />
       </picture>
       <button class="media__trigger" :class="modifier" @click="playPause">
         <span class="srOnly">play</span>
@@ -21,9 +21,9 @@ <h5>media__trigger -keepVisible</h5>
   <p-wistia>
     <template #placeholder="{ playPause, modifier }">
       <picture class="media__mask" :class="modifier">
-        <source srcset="https://unsplash.it/300/150?random&gravity=center" media="(min-width: 768px)">
-        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 480px)">
-        <img class="lazyload" srcset="https://unsplash.it/267/150?random&gravity=center" alt="" width="267" height="150">
+        <source srcset="https://unsplash.it/300/150?random&gravity=center" media="(min-width: 768px)" />
+        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 480px)" />
+        <img class="lazyload" srcset="https://unsplash.it/267/150?random&gravity=center" alt="" width="267" height="150" />
       </picture>
       <button class="media__trigger -keepVisible" :class="modifier" @click="playPause">
         <span class="srOnly">play</span>
@@ -33,4 +33,3 @@ <h5>media__trigger -keepVisible</h5>
     <iframe src="https://fast.wistia.net/embed/iframe/30q7n48g4f?autoplay=true" allowfullscreen tabindex="-1"></iframe>
   </p-wistia>
 </div>
-
diff --git a/resources/styles/atoms/media/media-PYouTube.html b/resources/styles/atoms/media/media-PYouTube.html
index 9c36beb..bbd199f 100644
--- a/resources/styles/atoms/media/media-PYouTube.html
+++ b/resources/styles/atoms/media/media-PYouTube.html
@@ -2,9 +2,9 @@
   <p-you-tube>
     <template #placeholder="{ playPause, modifier }">
       <picture class="media__mask" :class="modifier">
-        <source srcset="https://unsplash.it/300/150?random&gravity=center" media="(min-width: 768px)">
-        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 480px)">
-        <img class="lazyload" srcset="https://unsplash.it/267/150?random&gravity=center" alt="" width="267" height="150">
+        <source srcset="https://unsplash.it/300/150?random&gravity=center" media="(min-width: 768px)" />
+        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 480px)" />
+        <img class="lazyload" srcset="https://unsplash.it/267/150?random&gravity=center" alt="" width="267" height="150" />
       </picture>
       <button class="media__trigger" :class="modifier" @click="playPause">
         <span class="srOnly">play</span>
@@ -21,9 +21,9 @@ <h5>media__trigger -keepVisible</h5>
   <p-you-tube>
     <template #placeholder="{ playPause, modifier }">
       <picture class="media__mask" :class="modifier">
-        <source srcset="https://unsplash.it/300/150?random&gravity=center" media="(min-width: 768px)">
-        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 480px)">
-        <img class="lazyload" srcset="https://unsplash.it/267/150?random&gravity=center" alt="" width="267" height="150">
+        <source srcset="https://unsplash.it/300/150?random&gravity=center" media="(min-width: 768px)" />
+        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 480px)" />
+        <img class="lazyload" srcset="https://unsplash.it/267/150?random&gravity=center" alt="" width="267" height="150" />
       </picture>
       <button class="media__trigger -keepVisible" :class="modifier" @click="playPause">
         <span class="srOnly">play</span>
diff --git a/resources/styles/atoms/media/media-PYouTubePlaylist.html b/resources/styles/atoms/media/media-PYouTubePlaylist.html
index 8f942e7..b94c707 100644
--- a/resources/styles/atoms/media/media-PYouTubePlaylist.html
+++ b/resources/styles/atoms/media/media-PYouTubePlaylist.html
@@ -2,16 +2,15 @@
   <p-you-tube-playlist>
     <template #placeholder="{ playPause, modifier }">
       <picture class="media__mask" :class="modifier">
-        <source srcset="https://unsplash.it/300/150?random&gravity=center" media="(min-width: 768px)">
-        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 480px)">
-        <img class="lazyload" srcset="https://unsplash.it/267/150?random&gravity=center" alt="" width="267" height="150">
+        <source srcset="https://unsplash.it/300/150?random&gravity=center" media="(min-width: 768px)" />
+        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 480px)" />
+        <img class="lazyload" srcset="https://unsplash.it/267/150?random&gravity=center" alt="" width="267" height="150" />
       </picture>
       <button class="media__trigger" :class="modifier" @click="playPause">
         <span class="srOnly">play</span>
         <svg class="media__icon icon -circle" viewBox="0 0 96 96"><use href="/main-icons-sprite.svg#play" /></svg>
       </button>
     </template>
-    <iframe width="267" height="150" src="https://www.youtube.com/embed/videoseries?list=PLDA8A802CB81B6868" title="Embedded YouTube playlist"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen tabindex="-1"></iframe>
+    <iframe width="267" height="150" src="https://www.youtube.com/embed/videoseries?list=PLDA8A802CB81B6868" title="Embedded YouTube playlist" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen tabindex="-1"></iframe>
   </p-you-tube-playlist>
 </div>
-
diff --git a/resources/styles/atoms/radio/index.scss b/resources/styles/atoms/radio/index.scss
index 83256ff..e3f31c6 100644
--- a/resources/styles/atoms/radio/index.scss
+++ b/resources/styles/atoms/radio/index.scss
@@ -1,4 +1,4 @@
-:where(input[type=radio]) {
+:where(input[type='radio']) {
   --radio-size: 1.5rem;
   --radio-knob-size: calc(var(--radio-size) * 0.5);
 
@@ -10,8 +10,10 @@
   height: var(--radio-size);
   place-items: center;
   width: var(--radio-size);
-  outline-offset: .25em;
-  transition: background var(--root-ease-out-fast), border-color var(--root-ease-out-fast);
+  outline-offset: 0.25em;
+  transition:
+    background var(--root-ease-out-fast),
+    border-color var(--root-ease-out-fast);
 
   &:hover {
     &:where(:not(:disabled)) {
@@ -32,9 +34,9 @@
     opacity: 0;
     scale: 0;
     transition:
-    background 1000ms var(--root-ease-out),
-    opacity 1000ms var(--root-ease-out),
-    scale 1000ms var(--root-ease-out);
+      background 1000ms var(--root-ease-out),
+      opacity 1000ms var(--root-ease-out),
+      scale 1000ms var(--root-ease-out);
   }
 
   &.-checked,
diff --git a/resources/styles/atoms/radio/radio.html b/resources/styles/atoms/radio/radio.html
index 8adadf2..d106772 100644
--- a/resources/styles/atoms/radio/radio.html
+++ b/resources/styles/atoms/radio/radio.html
@@ -1,5 +1,4 @@
 <div style="display: flex; flex-wrap: wrap; gap: 1rem">
-
   <label for="one" class="field -inline">
     <input type="radio" name="radio-group" id="one" checked />
     Checked
@@ -9,25 +8,21 @@
     <input type="radio" name="radio-group" id="two" />
     Unchecked
   </label>
-
 </div>
 
 <div style="display: flex; flex-wrap: wrap; gap: 1rem">
-
   <label for="three" class="field -inline">
-    <input type="radio" name="radio-group-2" id="three" disabled/>
+    <input type="radio" name="radio-group-2" id="three" disabled />
     Disabled
   </label>
 
   <label for="four" class="field -inline">
-    <input type="radio" name="radio-group-2" id="four" checked disabled/>
+    <input type="radio" name="radio-group-2" id="four" checked disabled />
     Disabled Checked
   </label>
-
 </div>
 
 <div style="display: flex; flex-wrap: wrap; gap: 1rem">
-
   <label for="five" class="field">
     <input type="radio" name="radio-group-3" id="five" />
     Radio Above Label
@@ -37,10 +32,8 @@
     <input type="radio" name="radio-group-3" id="six" />
     Radio Above Label
   </label>
-
 </div>
 <div style="display: flex; flex-wrap: wrap; gap: 1rem">
-
   <label for="seven" class="field">
     Radio Below Label
     <input type="radio" name="radio-group-3" id="seven" />
@@ -50,10 +43,8 @@
     Radio Below Label
     <input type="radio" name="radio-group-3" id="eight" />
   </label>
-
 </div>
 <div style="display: flex; flex-wrap: wrap; gap: 1rem">
-
   <label for="nine" class="field -inline -reversed">
     <input type="radio" name="radio-group-3" id="nine" />
     Radio After Label
@@ -63,5 +54,4 @@
     <input type="radio" name="radio-group-3" id="ten" />
     Radio After Label
   </label>
-
 </div>
diff --git a/resources/styles/atoms/search/index.scss b/resources/styles/atoms/search/index.scss
index 9173e6c..01863fc 100644
--- a/resources/styles/atoms/search/index.scss
+++ b/resources/styles/atoms/search/index.scss
@@ -1,4 +1,4 @@
-@use "../input";
+@use '../input';
 
 .search {
   @extend .input;
@@ -14,7 +14,6 @@
   &__icon {
     color: var(--color-gray-400);
     margin-left: 1em;
-
   }
 
   &:focus-within &__icon {
@@ -22,7 +21,7 @@
   }
 
   &__input {
-    padding-left: .5em;
+    padding-left: 0.5em;
     border: 0;
   }
 }
diff --git a/resources/styles/atoms/search/search.html b/resources/styles/atoms/search/search.html
index 875fea3..c3b27cb 100644
--- a/resources/styles/atoms/search/search.html
+++ b/resources/styles/atoms/search/search.html
@@ -1,4 +1,4 @@
 <div class="search">
-    <svg class="search__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg>
-    <input class="search__input input" type="search" placeholder="Search for...">
+  <svg class="search__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg>
+  <input class="search__input input" type="search" placeholder="Search for..." />
 </div>
diff --git a/resources/styles/atoms/select/index.scss b/resources/styles/atoms/select/index.scss
index 4b2fa8a..41623fa 100644
--- a/resources/styles/atoms/select/index.scss
+++ b/resources/styles/atoms/select/index.scss
@@ -9,10 +9,9 @@ select {
   line-height: 1.5;
   margin-bottom: 1em;
   outline-offset: 2px;
-  padding: .5em 2em .5em 1em;
+  padding: 0.5em 2em 0.5em 1em;
 }
 
-
 .select {
   $b: &;
 
@@ -25,7 +24,7 @@ select {
     background: var(--accent-color);
     content: '';
     height: 1em;
-    margin-right: .75em;
+    margin-right: 0.75em;
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 21'%3E%3Cpath d='M34 2L18 18L2 2' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
     position: absolute;
     width: 1em;
@@ -52,5 +51,4 @@ select {
   &__placeholder {
     color: var(--color-gray-500);
   }
-
 }
diff --git a/resources/styles/atoms/select/multiselect.scss b/resources/styles/atoms/select/multiselect.scss
index aed0754..6d68faf 100644
--- a/resources/styles/atoms/select/multiselect.scss
+++ b/resources/styles/atoms/select/multiselect.scss
@@ -6,7 +6,7 @@
   --ms-option-bg-selected: var(--accent-color);
   --ms-option-color-selected: var(--accent-color-contrast);
   --ms-placeholder-color: var(--color-gray-400);
-  --ms-py: .4375rem;
+  --ms-py: 0.4375rem;
 
   margin-bottom: 1em;
   vertical-align: top;
diff --git a/resources/styles/atoms/select/select.html b/resources/styles/atoms/select/select.html
index 1ddfcfe..72edf3c 100644
--- a/resources/styles/atoms/select/select.html
+++ b/resources/styles/atoms/select/select.html
@@ -1,6 +1,6 @@
 <div class="select">
   <select class="select__input">
-  <option class="select__placeholder" selected disabled>Select an option</option>
+    <option class="select__placeholder" selected disabled>Select an option</option>
     <option value="">Lorem</option>
     <option value="">Ipsum</option>
     <option value="">Dolor</option>
@@ -12,7 +12,7 @@
 
 <div class="select accent-secondary">
   <select class="select__input">
-  <option class="select__placeholder" selected disabled>Select an option</option>
+    <option class="select__placeholder" selected disabled>Select an option</option>
     <option value="">Lorem</option>
     <option value="">Ipsum</option>
     <option value="">Dolor</option>
diff --git a/resources/styles/atoms/switch/index.scss b/resources/styles/atoms/switch/index.scss
index 831b0ee..ed8ee2b 100644
--- a/resources/styles/atoms/switch/index.scss
+++ b/resources/styles/atoms/switch/index.scss
@@ -4,7 +4,8 @@
   display: inline grid;
   height: 2em;
   padding: 3px;
-  transition: background-color var(--root-ease-out-fast),
+  transition:
+    background-color var(--root-ease-out-fast),
     box-shadow var(--root-ease-out-fast);
   width: 4em;
 
@@ -15,7 +16,8 @@
     height: 100%;
     justify-self: start;
     mask: unset;
-    transition: translate var(--root-ease-out-fast),
+    transition:
+      translate var(--root-ease-out-fast),
       background-color var(--root-ease-out-fast),
       box-shadow var(--root-ease-out-fast);
   }
diff --git a/resources/styles/atoms/switch/switch.html b/resources/styles/atoms/switch/switch.html
index 95a7b51..92306b3 100644
--- a/resources/styles/atoms/switch/switch.html
+++ b/resources/styles/atoms/switch/switch.html
@@ -1,23 +1,21 @@
 <div style="display: flex; flex-wrap: wrap; gap: 1rem">
-
   <label for="switch-active" class="field -inline">
-      <input type="checkbox" class="switch" role="switch" id="switch-active" checked>
-      Active Switch
+    <input type="checkbox" class="switch" role="switch" id="switch-active" checked />
+    Active Switch
   </label>
 
   <label for="switch-inactive" class="field -inline">
-      <input type="checkbox" class="switch" role="switch" id="switch-inactive">
-      Inactive Switch
+    <input type="checkbox" class="switch" role="switch" id="switch-inactive" />
+    Inactive Switch
   </label>
 
   <label for="switch-disabled" class="field -inline">
-      <input type="checkbox" class="switch" role="switch" id="switch-disabled" disabled>
-      Disabled Switch
+    <input type="checkbox" class="switch" role="switch" id="switch-disabled" disabled />
+    Disabled Switch
   </label>
 
   <label for="switch-disabled-active" class="field -inline">
-      <input type="checkbox" class="switch" role="switch" id="switch-disabled-active" disabled checked>
-      Disabled Active Switch
+    <input type="checkbox" class="switch" role="switch" id="switch-disabled-active" disabled checked />
+    Disabled Active Switch
   </label>
-
 </div>
diff --git a/resources/styles/atoms/tag/index.scss b/resources/styles/atoms/tag/index.scss
index fc34541..165997b 100644
--- a/resources/styles/atoms/tag/index.scss
+++ b/resources/styles/atoms/tag/index.scss
@@ -1,4 +1,3 @@
-
 /**
  * For use on checkboxes, radio switches, buttons, anchors or spans.
  * when used with checkboxs and radio the markup should be the following:
@@ -14,110 +13,112 @@
  */
 
 .tag {
-    $b: &;
-
-    align-items: center;
-    background-color: transparent;
-    border: 1px solid var(--accent-color);
-    border-radius: .333em; 
-    color: var(--accent-color-700);
-    display: inline-flex;
-    font-size: var(--root-font-size-sm);
-    gap: 0.667em;
-    justify-content: space-between;
-    line-height: 1;  
-    margin-bottom: calc(var(--root-gap) / 2);
-    margin-right: calc(var(--root-gap) / 2);
-    padding: 0.667em 1.333em;
-    position: relative;
-    transition: background var(--root-ease-out-fast), border-color var(--root-ease-out-fast);
-
-    &__input {
-        display: none;
+  $b: &;
+
+  align-items: center;
+  background-color: transparent;
+  border: 1px solid var(--accent-color);
+  border-radius: 0.333em;
+  color: var(--accent-color-700);
+  display: inline-flex;
+  font-size: var(--root-font-size-sm);
+  gap: 0.667em;
+  justify-content: space-between;
+  line-height: 1;
+  margin-bottom: calc(var(--root-gap) / 2);
+  margin-right: calc(var(--root-gap) / 2);
+  padding: 0.667em 1.333em;
+  position: relative;
+  transition:
+    background var(--root-ease-out-fast),
+    border-color var(--root-ease-out-fast);
+
+  &__input {
+    display: none;
+  }
+
+  &__icon {
+    aspect-ratio: 1;
+    color: var(--accent-color);
+    flex-shrink: 0;
+    height: 1.25em;
+    width: 1.25em;
+
+    > use {
+      &:nth-child(2) {
+        opacity: 0;
+      }
     }
+  }
+
+  &:hover {
+    border-color: var(--accent-color-700);
 
-    &__icon {
-        aspect-ratio: 1;
-        color: var(--accent-color);
-        flex-shrink: 0;
-        height: 1.25em;
-        width: 1.25em;
-
-        > use {
-            &:nth-child(2) {
-                opacity: 0;
-            }
-        }
+    #{$b}__icon {
+      color: var(--accent-color-700);
+    }
+  }
+
+  // Button tag
+  &:where(button) {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+    color: #fff;
+    box-shadow: var(--root-box-shadow-low);
+    #{$b}__icon {
+      color: #fff;
     }
 
     &:hover {
+      background-color: var(--accent-color-700);
       border-color: var(--accent-color-700);
+      cursor: pointer;
 
       #{$b}__icon {
-        color: var(--accent-color-700);
+        color: inherit;
       }
     }
+  }
 
-    // Button tag
-    &:where(button) {
-        background-color: var(--accent-color);
-        border-color: var(--accent-color);
-        color: #fff;
-        box-shadow: var(--root-box-shadow-low);
-        #{$b}__icon {
-            color: #fff;
-        }
-        
-        &:hover {
-            background-color: var(--accent-color-700);
-            border-color: var(--accent-color-700);
-            cursor: pointer;
-
-            #{$b}__icon {
-              color: inherit;
-            }
-        }
-    }
-
-    // Active/checked state
-    &.-active,
-    &:has(input:checked) {
-        background-color: var(--accent-color-700);
-        border-color: var(--accent-color-700);
-        color: #fff;
+  // Active/checked state
+  &.-active,
+  &:has(input:checked) {
+    background-color: var(--accent-color-700);
+    border-color: var(--accent-color-700);
+    color: #fff;
 
-        #{$b}__icon {
-            color: #fff;
-        }
+    #{$b}__icon {
+      color: #fff;
     }
+  }
+
+  // Dismissabe checkbox
+  &.-dismissable:has(input:checked) {
+    background-color: var(--accent-color-700);
+    border-color: var(--accent-color-700);
+    color: #fff;
+    #{$b}__icon {
+      color: #fff;
+      padding: 0.1667em;
+
+      > use:nth-child(1) {
+        opacity: 0;
+      }
 
-    // Dismissabe checkbox
-    &.-dismissable:has(input:checked) {
-        background-color: var(--accent-color-700);
-        border-color: var(--accent-color-700);
-        color: #fff;
-        #{$b}__icon {
-            color: #fff;
-            padding: .1667em;
-
-            > use:nth-child(1) {
-                opacity: 0;
-            }
-
-            > use:nth-child(2) {
-                opacity: 1;
-            }
-        }
+      > use:nth-child(2) {
+        opacity: 1;
+      }
     }
+  }
 
-    // forced inactive state.
-    &.-inactive, &:has(input:disabled) {
-        background-color: transparent;
-        border-color: var(--root-color-inactive);
-        color: var(--root-color-inactive);
-        #{$b}__icon {
-            color: var(--root-color-inactive);
-        }
+  // forced inactive state.
+  &.-inactive,
+  &:has(input:disabled) {
+    background-color: transparent;
+    border-color: var(--root-color-inactive);
+    color: var(--root-color-inactive);
+    #{$b}__icon {
+      color: var(--root-color-inactive);
     }
-
+  }
 }
diff --git a/resources/styles/config/index.scss b/resources/styles/config/index.scss
index c595bac..c491c85 100644
--- a/resources/styles/config/index.scss
+++ b/resources/styles/config/index.scss
@@ -1,9 +1,9 @@
-@use "@/core/mixins/breakpoints" as *;
+@use '@/core/mixins/breakpoints' as *;
 
 /**
  * @imports
  */
-@import url("https://fonts.googleapis.com/css2?family=Gloock&family=Inter:wght@100..900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Inter:wght@100..900&display=swap');
 
 :root {
   /**
@@ -13,16 +13,15 @@
   --root-font-family: initial;
   --root-font-family-heading: initial;
 
-  --root-font-size-h1: #{fluid-rems(    2,   2.5,    3)};
-  --root-font-size-h2: #{fluid-rems(  1.5,     2,  2.5)};
-  --root-font-size-h3: #{fluid-rems( 1.25,   1.5,    2)};
-  --root-font-size-h4: #{fluid-rems(1.125,  1.25,  1.5)};
-  --root-font-size-h5: #{fluid-rems(    1, 1.125, 1.25)};
+  --root-font-size-h1: #{fluid-rems(2, 2.5, 3)};
+  --root-font-size-h2: #{fluid-rems(1.5, 2, 2.5)};
+  --root-font-size-h3: #{fluid-rems(1.25, 1.5, 2)};
+  --root-font-size-h4: #{fluid-rems(1.125, 1.25, 1.5)};
+  --root-font-size-h5: #{fluid-rems(1, 1.125, 1.25)};
 
-  --root-font-size-sm: .75rem;
+  --root-font-size-sm: 0.75rem;
   --root-font-size-lg: 1.5rem;
 
-
   /**
    * Colors
    */
@@ -30,7 +29,7 @@
   /**
    * a default neutral color scale.
    */
-  --color-gray-50:  #f2f2f2;
+  --color-gray-50: #f2f2f2;
   --color-gray-100: #e5e5e5;
   --color-gray-200: #cccccc;
   --color-gray-300: #b3b3b3;
@@ -46,9 +45,9 @@
    * Site/brand colors. Add more as needed.
    */
   --color-purple: #9933ff;
-  --color-blue: #0066FF;
-  --color-blue-700: #003D99;
-  --color-aqua: #00CCCC;
+  --color-blue: #0066ff;
+  --color-blue-700: #003d99;
+  --color-aqua: #00cccc;
   --color-aqua-700: #009999;
 
   /**
@@ -121,7 +120,6 @@
   --root-color-info: #1ba9f0;
   --root-color-info-900: #002233;
 
-
   /**
    * Easings
    */
@@ -135,16 +133,17 @@
   --root-ease-in-out-moderate: var(--root-duration-moderate) var(--root-ease-in-out);
   --root-ease-in-out-slow: var(--root-duration-slow) var(--root-ease-in-out);
 
-
   /**
    * Breakpoints
    */
 
-  @include setBreakpoints((
-    sm: 320px,
-    md: 744px,
-    lg: 1300px
-  ));
+  @include setBreakpoints(
+    (
+      sm: 320px,
+      md: 744px,
+      lg: 1300px,
+    )
+  );
 
   --root-gap: 16px;
 
diff --git a/resources/styles/core/Fluid-Typgraphy.md b/resources/styles/core/Fluid-Typgraphy.md
index a169764..98e1011 100644
--- a/resources/styles/core/Fluid-Typgraphy.md
+++ b/resources/styles/core/Fluid-Typgraphy.md
@@ -1,5 +1,4 @@
-Fluid Typography
-================
+# Fluid Typography
 
 Pronto provides a sass function `fluid-rems()` for quickly defining fluid typography sizes based on the breakpoints:
 
@@ -12,10 +11,10 @@ fluid-rems($size-sm, $size-md, $size-lg)
 
 Pronto's heading are fluid by default:
 
-| Heading | at sm    | at md    | at lg    |
-| ------- | -------- | -------- | -------- |
-| h1      | 2rem     | 2.5rem   | 3rem     |
-| h2      | 1.5rem   | 2rem     | 2.5rem   |
-| h3      | 1.25rem  | 1.5rem   | 2rem     |
-| h4      | 1.125rem | 1.25rem  | 1.5rem   |
-| h5      | 1rem     | 1.125rem | 1.25rem  |
+| Heading | at sm    | at md    | at lg   |
+| ------- | -------- | -------- | ------- |
+| h1      | 2rem     | 2.5rem   | 3rem    |
+| h2      | 1.5rem   | 2rem     | 2.5rem  |
+| h3      | 1.25rem  | 1.5rem   | 2rem    |
+| h4      | 1.125rem | 1.25rem  | 1.5rem  |
+| h5      | 1rem     | 1.125rem | 1.25rem |
diff --git a/resources/styles/core/Properties.md b/resources/styles/core/Properties.md
index c9bf4d7..767b3ae 100644
--- a/resources/styles/core/Properties.md
+++ b/resources/styles/core/Properties.md
@@ -1,43 +1,52 @@
-Properties
-==========
+# Properties
 
 ## Root Properties
 
 The following custom properties are provided by Pronto. These are set by changing the values in config/.
 
 ### `--root-font-family`, `--root-font-family-heading`
+
 The default font families for the body and headings. We recommend using font stacks from https://modernfontstacks.com/
 
 ### `--root-font-size`
+
 Default font size.
 
 ### `--root-color`
+
 Default text color.
 
 ### `--root-color-inactive`
+
 Default inactive text color.
 
 ### `--root-border-color`, `--root-border-width`
+
 Default border color and width, primarily for form inputs.
 
 ### `--root-background-color`
+
 Default background color.
 
 ### `--root-background-color-inactive`
+
 Default background color for inactive elements, primarily for form inputs.
 
 ### `--root-box-shadow-low`, `--root-box-shadow-med`, `--root-box-shadow-high`
+
 Three different starting shadows for different implied heights.
 
 ### `--root-breakpoint-sm`, `--root-breakpoint-md`, `--root-breakpoint-lg`
+
 The three breakpoints in pixels **without units**. Leaving off the units makes these much more flexible. Also note, these variables cannot be used in media queries - it's a limitation of CSS.
 
 ### `--root-gap`
+
 The default gap between elements.
 
 ### `--root-padding-block`, `--root-padding-inline`
-The default block and inline padding for elements.
 
+The default block and inline padding for elements.
 
 ## `--accent-color`
 
diff --git a/resources/styles/core/accentColors.scss b/resources/styles/core/accentColors.scss
index 5b7675f..9516b28 100644
--- a/resources/styles/core/accentColors.scss
+++ b/resources/styles/core/accentColors.scss
@@ -13,7 +13,7 @@
   --accent-color-800: color-mix(in srgb, var(--accent-color), #000 60%);
   --accent-color-900: color-mix(in srgb, var(--accent-color), #000 80%);
   --accent-color-950: color-mix(in srgb, var(--accent-color), #000 90%);
-  
+
   /**
    * This variable is either black or white - whichever has the highest contrast
    * with the accent color. This uses CIELAB perceptual lightness, a close but
@@ -33,17 +33,11 @@
 
   /* This @supports rule targets only Safari 18 and Chrome */
   @supports (selector(::view-transition)) {
-    --accent-color-text: rgb(
-      from color-mix( in srgb, var(--accent-color-contrast), var(--accent-color-dark))
-      calc(2*r) calc(2*g) calc(2*b)
-    );
+    --accent-color-text: rgb(from color-mix(in srgb, var(--accent-color-contrast), var(--accent-color-dark)) calc(2 * r) calc(2 * g) calc(2 * b));
   }
 
   /* This @supports rule targets Firefox */
   @supports (selector(::view-transition)) {
-    --accent-color-text: rgb(
-      from color-mix( in srgb, var(--accent-color-contrast), var(--accent-color-dark))
-      calc(2*r) calc(2*g) calc(2*b)
-    );
+    --accent-color-text: rgb(from color-mix(in srgb, var(--accent-color-contrast), var(--accent-color-dark)) calc(2 * r) calc(2 * g) calc(2 * b));
   }
 }
diff --git a/resources/styles/core/base.scss b/resources/styles/core/base.scss
index 57a030e..cafb8b6 100644
--- a/resources/styles/core/base.scss
+++ b/resources/styles/core/base.scss
@@ -66,7 +66,7 @@ label[for],
 select,
 summary,
 textarea,
-[tabindex]:not([tabindex*="-"]) {
+[tabindex]:not([tabindex*='-']) {
   touch-action: manipulation;
 }
 
@@ -77,7 +77,6 @@ button {
   cursor: pointer;
 }
 
-
 /**
  * Increase margin below block elements and paragraphs before block elements
  */
@@ -97,7 +96,7 @@ p:has(+ :where(blockquote, hr, ol, picture, pre, table, ul)) {
 address {
   font-style: normal;
   line-height: 1.25;
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
 }
 
 /**
diff --git a/resources/styles/core/dev.scss b/resources/styles/core/dev.scss
index b512a45..be2fff0 100644
--- a/resources/styles/core/dev.scss
+++ b/resources/styles/core/dev.scss
@@ -21,11 +21,11 @@
 
 .placeholder {
   aspect-ratio: 1;
-  --placeholder-color: rgb(from var(--accent-color) r g b / .2);
+  --placeholder-color: rgb(from var(--accent-color) r g b / 0.2);
   border: 2px solid var(--placeholder-color);
-  background: linear-gradient(to top right, #0000 calc(50% - 2px), var(--placeholder-color), #0000 calc(50% + 2px)),
-    linear-gradient(to top left, #0000 calc(50% - 2px), var(--placeholder-color), #0000 calc(50% + 2px))
-    rgb(from var(--accent-color) r g b / .1);
+  background:
+    linear-gradient(to top right, #0000 calc(50% - 2px), var(--placeholder-color), #0000 calc(50% + 2px)),
+    linear-gradient(to top left, #0000 calc(50% - 2px), var(--placeholder-color), #0000 calc(50% + 2px)) rgb(from var(--accent-color) r g b / 0.1);
   align-content: center;
   text-align: center;
   color: var(--accent-color);
diff --git a/resources/styles/core/functions/fluid.scss b/resources/styles/core/functions/fluid.scss
index 603ae40..a29d014 100644
--- a/resources/styles/core/functions/fluid.scss
+++ b/resources/styles/core/functions/fluid.scss
@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 /**
  * Returns a calc() formula for REMs that fluidly scale from $size-sm to
diff --git a/resources/styles/core/index.scss b/resources/styles/core/index.scss
index c1fdde7..4e8f022 100644
--- a/resources/styles/core/index.scss
+++ b/resources/styles/core/index.scss
@@ -1,9 +1,9 @@
-@forward "accentColors";
-@forward "base";
-@forward "mixins/breakpoints";
-@forward "mixins/image-fit";
-@forward "mixins/pseudo-link";
-@forward "functions/fluid";
-@forward "properties";
-@forward "view-transitions";
-@forward "utilities";
+@forward 'accentColors';
+@forward 'base';
+@forward 'mixins/breakpoints';
+@forward 'mixins/image-fit';
+@forward 'mixins/pseudo-link';
+@forward 'functions/fluid';
+@forward 'properties';
+@forward 'view-transitions';
+@forward 'utilities';
diff --git a/resources/styles/core/mixins/breakpoints.scss b/resources/styles/core/mixins/breakpoints.scss
index 8b207dc..ffcba6a 100644
--- a/resources/styles/core/mixins/breakpoints.scss
+++ b/resources/styles/core/mixins/breakpoints.scss
@@ -1,6 +1,6 @@
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
 
 /**
  * Default breakpoints. Make sure to set setBreakpoints when changing these.
@@ -8,7 +8,7 @@
 $breakpoints: (
   sm: 320px,
   md: 744px,
-  lg: 1300px
+  lg: 1300px,
 ) !default;
 
 /**
@@ -93,7 +93,7 @@ $breakpoints: (
     $size: $name;
     $name: null;
   }
-  
+
   @container #{$name} (#{$property}: #{$size}) {
     @content;
   }
diff --git a/resources/styles/core/properties.scss b/resources/styles/core/properties.scss
index c235ca2..945e89f 100644
--- a/resources/styles/core/properties.scss
+++ b/resources/styles/core/properties.scss
@@ -2,79 +2,79 @@
  * Typography: use https://modernfontstacks.com/ for fallback fonts.
  */
 @property --root-font-family {
-  syntax: "*";
+  syntax: '*';
   inherits: true;
   initial-value: system-ui, sans-serif;
 }
 
 @property --root-font-family-heading {
-  syntax: "*";
+  syntax: '*';
   inherits: true;
   initial-value: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
 }
 
 @property --root-font-size {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 16px;
 }
 
 @property --root-font-size-h1 {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 48px;
 }
 
 @property --root-font-size-h2 {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 40px;
 }
 
 @property --root-font-size-h3 {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 32px;
 }
 
 @property --root-font-size-h4 {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 24px;
 }
 
 @property --root-font-size-h5 {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 20px;
 }
 
 @property --root-font-size-h6 {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 16px;
 }
 
 @property --root-font-size {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 16px;
 }
 
 @property --root-font-size-sm {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 12px;
 }
 
 @property --root-font-size-lg {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 24px;
 }
 
 @property --root-line-height {
-  syntax: "<number>";
+  syntax: '<number>';
   inherits: true;
   initial-value: 1.5;
 }
@@ -83,31 +83,31 @@
  * Colors
  */
 @property --root-color {
-  syntax: "<color>";
+  syntax: '<color>';
   inherits: true;
   initial-value: #666666;
 }
 
 @property --root-color-inactive {
-  syntax: "<color>";
+  syntax: '<color>';
   inherits: true;
   initial-value: #999999;
 }
 
 @property --root-border-color {
-  syntax: "<color>";
+  syntax: '<color>';
   inherits: true;
   initial-value: #b3b3b3;
 }
 
 @property --root-background-color {
-  syntax: "<color>";
+  syntax: '<color>';
   inherits: true;
   initial-value: #ffffff;
 }
 
 @property --root-background-color-inactive {
-  syntax: "<color>";
+  syntax: '<color>';
   inherits: true;
   initial-value: #cccccc;
 }
@@ -116,37 +116,37 @@
  * Icons
  */
 @property --root-icon-fill-color {
-  syntax: "<color>";
+  syntax: '<color>';
   inherits: true;
   initial-value: currentColor;
 }
 
 @property --root-icon-stroke-color {
-  syntax: "<color>";
+  syntax: '<color>';
   inherits: true;
   initial-value: #fff;
 }
 
 @property --root-icon-stroke-width {
-  syntax: "<number>";
+  syntax: '<number>';
   inherits: true;
   initial-value: 2;
 }
 
 @property --icon-fill-color {
-  syntax: "<color>";
+  syntax: '<color>';
   inherits: true;
   initial-value: currentColor;
 }
 
 @property --icon-stroke-color {
-  syntax: "<color>";
+  syntax: '<color>';
   inherits: true;
   initial-value: currentColor;
 }
 
 @property --icon-stroke-width {
-  syntax: "<number>";
+  syntax: '<number>';
   inherits: true;
   initial-value: 2;
 }
@@ -155,19 +155,19 @@
  * Breakpoints
  */
 @property --root-breakpoint-sm {
-  syntax: "<number>";
+  syntax: '<number>';
   inherits: true;
   initial-value: 320;
 }
 
 @property --root-breakpoint-md {
-  syntax: "<number>";
+  syntax: '<number>';
   inherits: true;
   initial-value: 744;
 }
 
 @property --root-breakpoint-lg {
-  syntax: "<number>";
+  syntax: '<number>';
   inherits: true;
   initial-value: 1300;
 }
@@ -176,31 +176,31 @@
  * Spacing
  */
 @property --root-border-width {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 2px;
 }
 
 @property --root-border-radius {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 4px;
 }
 
 @property --root-gap {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 16px;
 }
 
 @property --root-padding-block {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 16px;
 }
 
 @property --root-padding-inline {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: true;
   initial-value: 32px;
 }
@@ -209,19 +209,19 @@
  * Box Shadows
  */
 @property --root-box-shadow-low {
-  syntax: "*";
+  syntax: '*';
   inherits: true;
   initial-value: 0px 16px 64px rgba(0, 0, 0, 0.05);
 }
 
 @property --root-box-shadow-med {
-  syntax: "*";
+  syntax: '*';
   inherits: true;
   initial-value: 0px 16px 32px rgba(0, 0, 0, 0.1);
 }
 
 @property --root-box-shadow-high {
-  syntax: "*";
+  syntax: '*';
   inherits: true;
   initial-value: 0px 16px 64px rgba(0, 0, 0, 0.05);
 }
@@ -230,40 +230,40 @@
  * Durations 
  */
 @property --root-duration-fast {
-  syntax: "<time>";
+  syntax: '<time>';
   inherits: true;
   initial-value: 150ms;
 }
 
 @property --root-duration-moderate {
-  syntax: "<time>";
+  syntax: '<time>';
   inherits: true;
   initial-value: 250ms;
 }
 
 @property --root-duration-slow {
-  syntax: "<time>";
+  syntax: '<time>';
   inherits: true;
   initial-value: 400ms;
 }
 
 /**
  * Easings (timing functions)
- */ 
+ */
 @property --root-ease-in {
-  syntax: "*";
+  syntax: '*';
   inherits: true;
   initial-value: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 }
 
 @property --root-ease-out {
-  syntax: "*";
+  syntax: '*';
   inherits: true;
   initial-value: cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 @property --root-ease-in-out {
-  syntax: "*";
+  syntax: '*';
   inherits: true;
   initial-value: cubic-bezier(0.86, 0, 0.07, 1);
 }
diff --git a/resources/styles/core/utilities/container/container.html b/resources/styles/core/utilities/container/container.html
index 1c0946f..0bd9d84 100644
--- a/resources/styles/core/utilities/container/container.html
+++ b/resources/styles/core/utilities/container/container.html
@@ -1,11 +1,9 @@
 <div class="container">
-    <div style="background:#f002">
-        The basic <code>.grid.-container</code> blah blah.
-    </div>
+  <div style="background: #f002">The basic <code>.grid.-container</code> blah blah.</div>
 </div>
 
 <div class="container -columns-12">
-    <div class="cell -span-6 -left" style="background:#00f2">.-span-6</div>
-    <div class="cell -span-6 -center" style="background:#00f2">.-center-6</div>
-    <div class="cell -span-6 -right" style="background:#00f2">.-last-6</div>
+  <div class="cell -span-6 -left" style="background: #00f2">.-span-6</div>
+  <div class="cell -span-6 -center" style="background: #00f2">.-center-6</div>
+  <div class="cell -span-6 -right" style="background: #00f2">.-last-6</div>
 </div>
diff --git a/resources/styles/core/utilities/container/index.scss b/resources/styles/core/utilities/container/index.scss
index 26f4031..e4bf126 100644
--- a/resources/styles/core/utilities/container/index.scss
+++ b/resources/styles/core/utilities/container/index.scss
@@ -5,13 +5,14 @@
 
   display: grid;
   gap: var(--gap);
-  grid: auto /
+  grid:
+    auto /
     [wide-start]
-      1fr
+    1fr
     [main-start]
-      repeat(var(--columns), minmax(0, calc((var(--container-width) - (var(--columns) - 1) * var(--gap)) / var(--columns))))
+    repeat(var(--columns), minmax(0, calc((var(--container-width) - (var(--columns) - 1) * var(--gap)) / var(--columns))))
     [main-end]
-      1fr
+    1fr
     [wide-end];
 
   @for $i from 2 through 12 {
diff --git a/resources/styles/core/utilities/grid/cell.scss b/resources/styles/core/utilities/grid/cell.scss
index 7af7a77..309014c 100644
--- a/resources/styles/core/utilities/grid/cell.scss
+++ b/resources/styles/core/utilities/grid/cell.scss
@@ -27,7 +27,6 @@
     }
   }
 
-
   @for $i from 1 through 12 {
     &.-span-#{$i} {
       --span: #{$i};
diff --git a/resources/styles/core/utilities/grid/grid.html b/resources/styles/core/utilities/grid/grid.html
index fbc06ee..b5a9235 100644
--- a/resources/styles/core/utilities/grid/grid.html
+++ b/resources/styles/core/utilities/grid/grid.html
@@ -1,37 +1,25 @@
 <div class="grid">
-    <div style="background:#00f2">
-        <code>.grid</code> defaults to one column.
-    </div>
+  <div style="background: #00f2"><code>.grid</code> defaults to one column.</div>
 </div>
 
 <div class="grid -columns-2">
-    <div style="background:#00f2">You can
-        change this by adding a modifier: <code>.-columns-N</code>.
-    </div>
+  <div style="background: #00f2">You can change this by adding a modifier: <code>.-columns-N</code>.</div>
 </div>
 
 <div class="grid -columns-3">
-    <div class="cell -span-2" style="background:#00f2">
-        You can use <code>.cell.-span-N</code> as a utility to span columns.
-    </div>
+  <div class="cell -span-2" style="background: #00f2">You can use <code>.cell.-span-N</code> as a utility to span columns.</div>
 </div>
 
 <div class="grid -columns-3">
-    <div class="cell -right" style="background:#00f2">
-        You can use <code>.cell.-right</code> to right align an element.
-    </div>
+  <div class="cell -right" style="background: #00f2">You can use <code>.cell.-right</code> to right align an element.</div>
 </div>
 
 <div class="grid -columns-12">
-    <div class="cell -span-4 -center" style="background: #0f02">
-        4 middle cells
-    </div>
+  <div class="cell -span-4 -center" style="background: #0f02">4 middle cells</div>
 </div>
 
 <div class="grid -columns-9">
-    <div class="cell -span-5 -center" style="background:#00f2">
-        You can use <code>.cell.-center-N</code> to center an element, as best as it can.
-    </div>
+  <div class="cell -span-5 -center" style="background: #00f2">You can use <code>.cell.-center-N</code> to center an element, as best as it can.</div>
 </div>
 
 <h5>Examples</h5>
@@ -41,9 +29,7 @@ <h5>Examples</h5>
     <div class="cell section__content placeholder" style="aspect-ratio: 634 / 368"></div>
     <div class="cell section__content -prioritize">
       <h3>This section is grid -columns-2.</h3>
-      <p>
-        Al of the layout for these sections are being done using .grid and .cell. 
-      </p>
+      <p>Al of the layout for these sections are being done using .grid and .cell.</p>
     </div>
   </div>
 </section>
@@ -52,7 +38,7 @@ <h3>This section is grid -columns-2.</h3>
   <div class="grid -columns-3">
     <div class="cell -span-2 section__content -prioritize">
       <h3>This shows how to do two-thirds content.</h3>
-      <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat. </p>
+      <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat.</p>
     </div>
     <div class="cell section__content placeholder" style="aspect-ratio: 634 / 368"></div>
   </div>
@@ -62,7 +48,7 @@ <h3>This shows how to do two-thirds content.</h3>
   <div class="grid -columns-4">
     <div class="cell -center -span-2 section__content -prioritize">
       <h3>And here's an example centering the content.</h3>
-      <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat. </p>
+      <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat.</p>
       <div class="actions">
         <a class="button -outline" href="#">Learn More</a>
         <a class="button -accent-primary" href="#">Buy Now</a>
@@ -70,4 +56,3 @@ <h3>And here's an example centering the content.</h3>
     </div>
   </div>
 </section>
-
diff --git a/resources/styles/core/utilities/grid/index.scss b/resources/styles/core/utilities/grid/index.scss
index 2c8ce2d..3e9849f 100644
--- a/resources/styles/core/utilities/grid/index.scss
+++ b/resources/styles/core/utilities/grid/index.scss
@@ -1,4 +1,4 @@
-@use "cell";
+@use 'cell';
 
 .grid {
   --columns: 1;
diff --git a/resources/styles/core/utilities/index.scss b/resources/styles/core/utilities/index.scss
index 4c1aa65..7e98b63 100644
--- a/resources/styles/core/utilities/index.scss
+++ b/resources/styles/core/utilities/index.scss
@@ -1,3 +1,3 @@
-@forward "container";
-@forward "grid";
-@forward "srOnly";
+@forward 'container';
+@forward 'grid';
+@forward 'srOnly';
diff --git a/resources/styles/core/utilities/srOnly/index.scss b/resources/styles/core/utilities/srOnly/index.scss
index 4333685..42d3235 100644
--- a/resources/styles/core/utilities/srOnly/index.scss
+++ b/resources/styles/core/utilities/srOnly/index.scss
@@ -1,11 +1,11 @@
 .srOnly {
-    border-width: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
diff --git a/resources/styles/core/utilities/srOnly/srOnly.html b/resources/styles/core/utilities/srOnly/srOnly.html
index 38cc075..a65466f 100644
--- a/resources/styles/core/utilities/srOnly/srOnly.html
+++ b/resources/styles/core/utilities/srOnly/srOnly.html
@@ -1,5 +1,3 @@
 There is a hidden sentence after this one that is only visible to screen readers.
 
-<span class="srOnly">
-    This is done by using the srOnly class.
-</span>
+<span class="srOnly"> This is done by using the srOnly class. </span>
diff --git a/resources/styles/index.scss b/resources/styles/index.scss
index 8f4588a..fa467d7 100644
--- a/resources/styles/index.scss
+++ b/resources/styles/index.scss
@@ -1,7 +1,7 @@
-@forward "core";
-@forward "core/dev";
-@forward "config";
-@forward "atoms";
-@forward "molecules";
-@forward "organisms";
-@forward "utilities";
+@forward 'core';
+@forward 'core/dev';
+@forward 'config';
+@forward 'atoms';
+@forward 'molecules';
+@forward 'organisms';
+@forward 'utilities';
diff --git a/resources/styles/molecules/accordion/accordion.html b/resources/styles/molecules/accordion/accordion.html
index 7c177ec..4c92c03 100644
--- a/resources/styles/molecules/accordion/accordion.html
+++ b/resources/styles/molecules/accordion/accordion.html
@@ -1,97 +1,75 @@
 <div style="display: grid; gap: 1rem">
+  <p-accordion name="example" class="accordion">
+    <summary class="accordion__summary">
+      <h3 class="accordion__heading">Hey wait - is this a pure CSS accordion now?</h3>
+      <div class="accordion__iconWrapper">
+        <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
+          <use href="/main-icons-sprite.svg#chevron-right" />
+        </svg>
+      </div>
+    </summary>
+    <div class="accordion__content">
+      <p>
+        You bet it is – it works great, animates on opening and closing, but there's only one real gotcha now...
+        <strong>browser support.</strong>
+      </p>
+      <p>Neither Firefox nor Safari support <code>interpolate-size: allow-keywords</code> which is required for this implementation.</p>
+    </div>
+  </p-accordion>
 
-    <p-accordion name="example" class="accordion">
-        <summary class="accordion__summary">
-            <h3 class="accordion__heading">
-                Hey wait - is this a pure CSS accordion now?
-            </h3>
-            <div class="accordion__iconWrapper">
-                <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
-                    <use href="/main-icons-sprite.svg#chevron-right" />
-                </svg>
-            </div>
-        </summary>
-        <div class="accordion__content">
-            <p>
-                You bet it is – it works great, animates on opening and closing, but there's only one real gotcha now...
-                <strong>browser support.</strong>
-            </p>
-            <p>
-                Neither Firefox nor Safari support <code>interpolate-size: allow-keywords</code> which is required for this
-                implementation.
-            </p>
-        </div>
-    </p-accordion>
+  <details name="example" class="accordion accent-primary">
+    <summary class="accordion__summary">
+      <h3 class="accordion__heading">Why do we need a FAQ style module?</h3>
+      <div class="accordion__iconWrapper">
+        <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
+          <use href="/main-icons-sprite.svg#chevron-right" />
+        </svg>
+      </div>
+    </summary>
+    <div class="accordion__content">
+      <p>Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.</p>
+    </div>
+  </details>
 
-    <details name="example" class="accordion accent-primary">
-        <summary class="accordion__summary">
-            <h3 class="accordion__heading">
-                Why do we need a FAQ style module?
-            </h3>
-            <div class="accordion__iconWrapper">
-                <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
-                    <use href="/main-icons-sprite.svg#chevron-right" />
-                </svg>
-            </div>
-        </summary>
-        <div class="accordion__content">
-            <p>
-                Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.
-            </p>
-        </div>
-    </details>
+  <details name="example" class="accordion accent-tertiary">
+    <summary class="accordion__summary">
+      <h3 class="accordion__heading">Is this considered a frequently asked question?</h3>
+      <div class="accordion__iconWrapper">
+        <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
+          <use href="/main-icons-sprite.svg#chevron-right" />
+        </svg>
+      </div>
+    </summary>
+    <div class="accordion__content">
+      <p>Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.</p>
+    </div>
+  </details>
 
-    <details name="example" class="accordion accent-tertiary">
-        <summary class="accordion__summary">
-            <h3 class="accordion__heading">
-                Is this considered a frequently asked question?
-            </h3>
-            <div class="accordion__iconWrapper">
-                <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
-                    <use href="/main-icons-sprite.svg#chevron-right" />
-                </svg>
-            </div>
-        </summary>
-        <div class="accordion__content">
-            <p>
-                Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.
-            </p>
-        </div>
-    </details>
+  <details name="example" class="accordion">
+    <summary class="accordion__summary">
+      <h3 class="accordion__heading">Can this be used in more general situations?</h3>
+      <div class="accordion__iconWrapper">
+        <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
+          <use href="/main-icons-sprite.svg#chevron-right" />
+        </svg>
+      </div>
+    </summary>
+    <div class="accordion__content">
+      <p>Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.</p>
+    </div>
+  </details>
 
-    <details name="example" class="accordion">
-        <summary class="accordion__summary">
-            <h3 class="accordion__heading">
-                Can this be used in more general situations?
-            </h3>
-            <div class="accordion__iconWrapper">
-                <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
-                    <use href="/main-icons-sprite.svg#chevron-right" />
-                </svg>
-            </div>
-        </summary>
-        <div class="accordion__content">
-            <p>
-                Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.
-            </p>
-        </div>
-    </details>
-
-    <details name="example" class="accordion">
-        <summary class="accordion__summary">
-            <h3 class="accordion__heading">
-                Why use a different color for interactions vs. navigation?
-            </h3>
-            <div class="accordion__iconWrapper">
-                <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
-                    <use href="/main-icons-sprite.svg#chevron-right" />
-                </svg>
-            </div>
-        </summary>
-        <div class="accordion__content">
-            <p>
-                Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.
-            </p>
-        </div>
-    </details>
+  <details name="example" class="accordion">
+    <summary class="accordion__summary">
+      <h3 class="accordion__heading">Why use a different color for interactions vs. navigation?</h3>
+      <div class="accordion__iconWrapper">
+        <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
+          <use href="/main-icons-sprite.svg#chevron-right" />
+        </svg>
+      </div>
+    </summary>
+    <div class="accordion__content">
+      <p>Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.</p>
+    </div>
+  </details>
 </div>
diff --git a/resources/styles/molecules/accordion/index.scss b/resources/styles/molecules/accordion/index.scss
index 906ccbe..eb5ddad 100644
--- a/resources/styles/molecules/accordion/index.scss
+++ b/resources/styles/molecules/accordion/index.scss
@@ -2,84 +2,84 @@
  * @uses PAccordion
  */
 .accordion {
-    $b: &;
+  $b: &;
 
-    background: white;
-    border-radius: .5rem;
-    box-shadow: var(--root-box-shadow-low);
-    overflow: hidden;
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: var(--root-box-shadow-low);
+  overflow: hidden;
 
-    &::details-content {
-      height: 0;
-      transition: height var(--accordion-transition-duration, var(--root-duration-slow)) var(--root-ease-out);
+  &::details-content {
+    height: 0;
+    transition: height var(--accordion-transition-duration, var(--root-duration-slow)) var(--root-ease-out);
 
-      @supports (interpolate-size: allow-keywords) {
-        transition: content-visibility var(--root-duration-slow) allow-discrete,
-          height var(--root-duration-slow) var(--root-ease-out);
-      }
+    @supports (interpolate-size: allow-keywords) {
+      transition:
+        content-visibility var(--root-duration-slow) allow-discrete,
+        height var(--root-duration-slow) var(--root-ease-out);
     }
+  }
 
-    &[open]::details-content {
-      height: var(--accordion-height);
+  &[open]::details-content {
+    height: var(--accordion-height);
 
-
-      @supports (interpolate-size: allow-keywords) {
-        height: auto;
-      }
+    @supports (interpolate-size: allow-keywords) {
+      height: auto;
     }
+  }
 
-    &__summary {
-        --heading-color: var(--root-color-headings);
+  &__summary {
+    --heading-color: var(--root-color-headings);
 
-        align-items: center;
-        border-radius: .5rem;
-        cursor: pointer;
-        display: grid;
-        grid-auto-flow: column;
-        justify-items: start;
-        list-style: none;
-        outline-offset: -2px;
-        padding: .5rem;
-        user-select: none;
+    align-items: center;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    display: grid;
+    grid-auto-flow: column;
+    justify-items: start;
+    list-style: none;
+    outline-offset: -2px;
+    padding: 0.5rem;
+    user-select: none;
 
-        &::-webkit-details-marker {
-          display: none;
-        }
-    }
-    
-    &__heading {
-        margin: 0;
-        padding: .25rem 1rem;
-    }
-    
-    &__iconWrapper {
-        background: var(--accent-color);
-        display: grid;
-        justify-self: end;
-        padding: .5rem;
+    &::-webkit-details-marker {
+      display: none;
     }
-    
-    &__icon {
-        --icon-color: var(--accent-color-contrast);
-        aspect-ratio: 1;
-        height: var(--root-font-size-h3);
-        transition: transform var(--root-duration-moderate) var(--root-ease-out);
-    }
-    
-    &__content {
-        padding: 0 1.5rem 1.5rem;
+  }
+
+  &__heading {
+    margin: 0;
+    padding: 0.25rem 1rem;
+  }
+
+  &__iconWrapper {
+    background: var(--accent-color);
+    display: grid;
+    justify-self: end;
+    padding: 0.5rem;
+  }
+
+  &__icon {
+    --icon-color: var(--accent-color-contrast);
+    aspect-ratio: 1;
+    height: var(--root-font-size-h3);
+    transition: transform var(--root-duration-moderate) var(--root-ease-out);
+  }
+
+  &__content {
+    padding: 0 1.5rem 1.5rem;
+  }
+
+  &[open] {
+    box-shadow: var(--root-box-shadow-high);
+
+    #{$b}__iconWrapper {
+      background: var(--color-gray-200);
     }
-    
-    &[open] {
-        box-shadow: var(--root-box-shadow-high);
-        
-        #{$b}__iconWrapper {
-            background: var(--color-gray-200);
-        }
-        
-        #{$b}__icon {
-            --icon-color: #000;
-            transform: rotate(90deg);
-        }
+
+    #{$b}__icon {
+      --icon-color: #000;
+      transform: rotate(90deg);
     }
+  }
 }
diff --git a/resources/styles/molecules/banner/banner.html b/resources/styles/molecules/banner/banner.html
index 3feaa1a..3af685c 100644
--- a/resources/styles/molecules/banner/banner.html
+++ b/resources/styles/molecules/banner/banner.html
@@ -2,9 +2,9 @@
   <p-dismissable class="banner" name="banner1" v-slot="{ close }">
     <div class="banner__content">
       <p>
-      Consectetur aliquid qui sapiente minima libero. Vel blanditiis distinctio numquam aliquam temporibus repellendus. Quis esse vitae vitae sunt sapiente velit. Repellendus facilis voluptate dolore debitis quas! Vitae dignissimos aliquid porro
-  
-      <a href="#">Dolor magni amet quaerat</a> nobis quis Laborum deserunt quo delectus optio eius eaque Mollitia reprehenderit maiores numquam libero nesciunt Quae non dolor exercitationem debitis at Excepturi quam eum in voluptas.
+        Consectetur aliquid qui sapiente minima libero. Vel blanditiis distinctio numquam aliquam temporibus repellendus. Quis esse vitae vitae sunt sapiente velit. Repellendus facilis voluptate dolore debitis quas! Vitae dignissimos aliquid porro
+
+        <a href="#">Dolor magni amet quaerat</a> nobis quis Laborum deserunt quo delectus optio eius eaque Mollitia reprehenderit maiores numquam libero nesciunt Quae non dolor exercitationem debitis at Excepturi quam eum in voluptas.
       </p>
       <button class="banner__close" @click="close">
         <svg class="icon accent-white -heavy" viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
@@ -16,14 +16,8 @@
 <div class="container">
   <p-dismissable class="banner" name="banner2" v-slot="{ close }">
     <div class="banner__content">
-      <p>
-      Consectetur aliquid qui sapiente minima libero. Vel blanditiis distinctio numquam aliquam temporibus repellendus. Quis esse vitae vitae sunt sapiente velit. Repellendus facilis voluptate dolore debitis quas! Vitae dignissimos aliquid porro
-  
-      Dolor magni amet quaerat nobis quis Laborum deserunt quo delectus optio eius eaque Mollitia reprehenderit maiores numquam libero nesciunt Quae non dolor exercitationem debitis at Excepturi quam eum in voluptas.
-      </p>
-      <button class="banner__action button -outline-fill accent-white" @click="close">
-        I accept
-      </button>
+      <p>Consectetur aliquid qui sapiente minima libero. Vel blanditiis distinctio numquam aliquam temporibus repellendus. Quis esse vitae vitae sunt sapiente velit. Repellendus facilis voluptate dolore debitis quas! Vitae dignissimos aliquid porro Dolor magni amet quaerat nobis quis Laborum deserunt quo delectus optio eius eaque Mollitia reprehenderit maiores numquam libero nesciunt Quae non dolor exercitationem debitis at Excepturi quam eum in voluptas.</p>
+      <button class="banner__action button -outline-fill accent-white" @click="close">I accept</button>
     </div>
   </p-dismissable>
 </div>
diff --git a/resources/styles/molecules/card/card--condensed.html b/resources/styles/molecules/card/card--condensed.html
index a09885d..99cff7a 100644
--- a/resources/styles/molecules/card/card--condensed.html
+++ b/resources/styles/molecules/card/card--condensed.html
@@ -1,40 +1,34 @@
 <h2>Card Condensed</h2>
-<div class="card -condensed" style="max-width: 25.75rem;">
-    <div class="card__content">
-        <p class="card__meta">
-            Posted Aug 12, 2023 by <a href="#" class="card__metaLink">Daphne Writesposts</a>
+<div class="card -condensed" style="max-width: 25.75rem">
+  <div class="card__content">
+    <p class="card__meta">Posted Aug 12, 2023 by <a href="#" class="card__metaLink">Daphne Writesposts</a></p>
+    <span class="card__title h3"> Title of card that will fall to two lines </span>
+    <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.</p>
+    <p class="card__meta">
+      <svg class="card__metaIcon">
+        <use href="/main-icons-sprite.svg#clock" /></svg
+      >15 Minute Read
+    </p>
+    <ul class="card__tagList">
+      <li class="card__tagListItem">
+        <p class="tag">
+          <svg class="tag__icon">
+            <use href="/main-icons-sprite.svg#tag" />
+          </svg>
+          Simple Tag
         </p>
-        <span class="card__title h3">
-            Title of card that will fall to two lines
-        </span>
-        <p class="card__description">
-            Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.
+      </li>
+      <li class="card__tagListItem">
+        <p class="tag">
+          <svg class="tag__icon">
+            <use href="/main-icons-sprite.svg#tag" />
+          </svg>
+          Simple Tag
         </p>
-        <p class="card__meta">
-            <svg class="card__metaIcon">
-                <use href="/main-icons-sprite.svg#clock" />
-            </svg>15 Minute Read
-        </p>
-        <ul class="card__tagList">
-            <li class="card__tagListItem">
-                <p class="tag">
-                    <svg class="tag__icon">
-                        <use href="/main-icons-sprite.svg#tag" />
-                    </svg>
-                    Simple Tag
-                </p>
-            </li>
-            <li class="card__tagListItem">
-                <p class="tag">
-                    <svg class="tag__icon">
-                        <use href="/main-icons-sprite.svg#tag" />
-                    </svg>
-                    Simple Tag
-                </p>
-            </li>
-        </ul>
-    </div>
-    <div class="card__imageWrapper">
-        <img src="https://panoramicireland.com/media/k2/items/cache/cb9c495b17bc28a44ffb50c55572ed63_XL.jpg" alt="" class="card__image">
-    </div>
+      </li>
+    </ul>
+  </div>
+  <div class="card__imageWrapper">
+    <img src="https://panoramicireland.com/media/k2/items/cache/cb9c495b17bc28a44ffb50c55572ed63_XL.jpg" alt="" class="card__image" />
+  </div>
 </div>
diff --git a/resources/styles/molecules/card/card--flipped.html b/resources/styles/molecules/card/card--flipped.html
index 645a803..86d55f3 100644
--- a/resources/styles/molecules/card/card--flipped.html
+++ b/resources/styles/molecules/card/card--flipped.html
@@ -1,22 +1,16 @@
 <h2>Card Flipped</h2>
-<div class="card -flipped" style="max-width: 25.75rem;">
-    <div class="card__content">
-        <span class="card__title h3">
-            Title of card that will fall to two lines
-        </span>
-        <p class="card__meta">
-            <svg class="card__metaIcon">
-                <use href="/main-icons-sprite.svg#clock" />
-            </svg>Posted Aug 12, 2023 by <a href="#" class="card__metaLink">Daphne Writesposts</a>
-        </p>
-        <p class="card__description">
-            Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.
-        </p>
-        <a href="" class="card__button button">
-            Default Button
-        </a>
-    </div>
-    <div class="card__imageWrapper">
-        <img src="https://panoramicireland.com/media/k2/items/cache/cb9c495b17bc28a44ffb50c55572ed63_XL.jpg" alt="" class="card__image">
-    </div>
+<div class="card -flipped" style="max-width: 25.75rem">
+  <div class="card__content">
+    <span class="card__title h3"> Title of card that will fall to two lines </span>
+    <p class="card__meta">
+      <svg class="card__metaIcon">
+        <use href="/main-icons-sprite.svg#clock" /></svg
+      >Posted Aug 12, 2023 by <a href="#" class="card__metaLink">Daphne Writesposts</a>
+    </p>
+    <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.</p>
+    <a href="" class="card__button button"> Default Button </a>
+  </div>
+  <div class="card__imageWrapper">
+    <img src="https://panoramicireland.com/media/k2/items/cache/cb9c495b17bc28a44ffb50c55572ed63_XL.jpg" alt="" class="card__image" />
+  </div>
 </div>
diff --git a/resources/styles/molecules/card/card--icon.html b/resources/styles/molecules/card/card--icon.html
index 7c0422f..0019bcd 100644
--- a/resources/styles/molecules/card/card--icon.html
+++ b/resources/styles/molecules/card/card--icon.html
@@ -1,19 +1,13 @@
 <h2>Card Icon</h2>
-<div class="card" style="max-width: 25.75rem;">
-    <div class="card__content">
-        <div class="card__iconWrapper">
-            <svg class="card__icon icon icon-layer-group">
-                <use href="/main-icons-sprite.svg#layers" />
-            </svg>
-        </div>
-        <span class="card__title h3">
-            Title of card that will fall to two lines
-        </span>
-        <p class="card__description">
-            Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.
-        </p>
-        <a href="" class="card__button button">
-            Default Button
-        </a>
+<div class="card" style="max-width: 25.75rem">
+  <div class="card__content">
+    <div class="card__iconWrapper">
+      <svg class="card__icon icon icon-layer-group">
+        <use href="/main-icons-sprite.svg#layers" />
+      </svg>
     </div>
+    <span class="card__title h3"> Title of card that will fall to two lines </span>
+    <p class="card__description">Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.</p>
+    <a href="" class="card__button button"> Default Button </a>
+  </div>
 </div>
diff --git a/resources/styles/molecules/card/card.html b/resources/styles/molecules/card/card.html
index 15f9055..723443a 100644
--- a/resources/styles/molecules/card/card.html
+++ b/resources/styles/molecules/card/card.html
@@ -1,20 +1,16 @@
 <h2>Card</h2>
-<div class="card" style="max-width: 25.75rem;">
-    <div class="card__content">
-        <span class="card__title h3">
-            Title of card that will fall to two lines
-        </span>
-        <p class="card__description">
-            Quisque tristique Standard Text Link sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.
-        </p>
-        <a href="#" class="card__cta link -wide">
-            Standard Text Link
-            <svg class="card__ctaIcon link__icon">
-                <use href="/main-icons-sprite.svg#arrow-right" />
-            </svg>
-        </a>
-    </div>
-    <div class="card__imageWrapper">
-        <img src="https://panoramicireland.com/media/k2/items/cache/cb9c495b17bc28a44ffb50c55572ed63_XL.jpg" alt="" class="card__image">
-    </div>
+<div class="card" style="max-width: 25.75rem">
+  <div class="card__content">
+    <span class="card__title h3"> Title of card that will fall to two lines </span>
+    <p class="card__description">Quisque tristique Standard Text Link sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis, eleifend velit. Aenean ac porta nisl. Ut eu bibendum nisi.</p>
+    <a href="#" class="card__cta link -wide">
+      Standard Text Link
+      <svg class="card__ctaIcon link__icon">
+        <use href="/main-icons-sprite.svg#arrow-right" />
+      </svg>
+    </a>
+  </div>
+  <div class="card__imageWrapper">
+    <img src="https://panoramicireland.com/media/k2/items/cache/cb9c495b17bc28a44ffb50c55572ed63_XL.jpg" alt="" class="card__image" />
+  </div>
 </div>
diff --git a/resources/styles/molecules/card/index.scss b/resources/styles/molecules/card/index.scss
index 649ca11..e652144 100644
--- a/resources/styles/molecules/card/index.scss
+++ b/resources/styles/molecules/card/index.scss
@@ -1,4 +1,4 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .card {
   $b: &;
@@ -52,7 +52,7 @@
     display: inline-block;
     height: 1.25em;
     width: 1.25em;
-    margin-right: .5em;
+    margin-right: 0.5em;
     aspect-ratio: 1;
     vertical-align: text-bottom;
   }
@@ -63,7 +63,7 @@
 
   &__title {
     font-size: fluid-rems(1.5, 2);
-    margin: .5rem 0;
+    margin: 0.5rem 0;
   }
 
   &__description {
diff --git a/resources/styles/molecules/checklist/checklist.html b/resources/styles/molecules/checklist/checklist.html
index 8224f46..9a15e8c 100644
--- a/resources/styles/molecules/checklist/checklist.html
+++ b/resources/styles/molecules/checklist/checklist.html
@@ -1,29 +1,20 @@
 <ul class="checklist">
-    <li class="checklist__item">
-        <input type="checkbox" id="check1" class="checklist__input">
-        <label for="check1" class="checklist__label">
-            Elit non fuga ratione quidem eligendi? Temporibus dolor eveniet distinctio tempora adipisci Sed ducimus voluptate voluptate repudiandae quis? Perferendis molestias eum dolorem dolorem veniam. Ipsa enim animi eveniet qui totam
-        </label>
-    </li>
-    <li class="checklist__item">
-        <input type="checkbox" id="check2" checked class="checklist__input">
-        <label for="check2" class="checklist__label">
-            Lorem maxime dolores dolores saepe quia quo Numquam quas veritatis officia incidunt est beatae debitis Rerum voluptates illum accusamus fugit ipsa impedit magni Reiciendis sapiente quidem consequuntur ut molestias voluptatum
-        </label>
-    </li>
+  <li class="checklist__item">
+    <input type="checkbox" id="check1" class="checklist__input" />
+    <label for="check1" class="checklist__label"> Elit non fuga ratione quidem eligendi? Temporibus dolor eveniet distinctio tempora adipisci Sed ducimus voluptate voluptate repudiandae quis? Perferendis molestias eum dolorem dolorem veniam. Ipsa enim animi eveniet qui totam </label>
+  </li>
+  <li class="checklist__item">
+    <input type="checkbox" id="check2" checked class="checklist__input" />
+    <label for="check2" class="checklist__label"> Lorem maxime dolores dolores saepe quia quo Numquam quas veritatis officia incidunt est beatae debitis Rerum voluptates illum accusamus fugit ipsa impedit magni Reiciendis sapiente quidem consequuntur ut molestias voluptatum </label>
+  </li>
 
-    <li class="checklist__item">
-        <input type="radio" name="radio1" id="radio1" class="checklist__input">
-        <label for="radio1" class="checklist__label">
-            Ipsum blanditiis sapiente reiciendis laboriosam maxime Sapiente ab exercitationem saepe vero blanditiis quis Tempora quibusdam iure perferendis quasi provident? Consequuntur velit reprehenderit voluptatem vel vitae. Placeat harum labore voluptatibus inventore
-        </label>
-    </li>
-    
-    <li class="checklist__item">
-        <input type="radio" name="radio1" id="radio2" checked class="checklist__input">
-        <label for="radio2" class="checklist__label">
-            Ipsum nesciunt incidunt soluta corporis distinctio? Tempore enim possimus architecto fugit expedita. Alias voluptates hic cum atque nihil Aliquam beatae laborum error id saepe Inventore aspernatur vitae cumque repellat magni.
-        </label>
-    </li>
-    
+  <li class="checklist__item">
+    <input type="radio" name="radio1" id="radio1" class="checklist__input" />
+    <label for="radio1" class="checklist__label"> Ipsum blanditiis sapiente reiciendis laboriosam maxime Sapiente ab exercitationem saepe vero blanditiis quis Tempora quibusdam iure perferendis quasi provident? Consequuntur velit reprehenderit voluptatem vel vitae. Placeat harum labore voluptatibus inventore </label>
+  </li>
+
+  <li class="checklist__item">
+    <input type="radio" name="radio1" id="radio2" checked class="checklist__input" />
+    <label for="radio2" class="checklist__label"> Ipsum nesciunt incidunt soluta corporis distinctio? Tempore enim possimus architecto fugit expedita. Alias voluptates hic cum atque nihil Aliquam beatae laborum error id saepe Inventore aspernatur vitae cumque repellat magni. </label>
+  </li>
 </ul>
diff --git a/resources/styles/molecules/featureVideo/featureVideo.html b/resources/styles/molecules/featureVideo/featureVideo.html
index 76cc2bb..31cfe65 100644
--- a/resources/styles/molecules/featureVideo/featureVideo.html
+++ b/resources/styles/molecules/featureVideo/featureVideo.html
@@ -1,38 +1,28 @@
 <div class="featureVideo accent-primary">
-	<div class="featureVideo__media">
-		<div class="media">
-			<p-lazy>
-				<video class="media__content" controls playsinline>
-					<source
-						data-src="https://www.w3schools.com/html/mov_bbb.mp4"
-						type="video/mp4"
-					/>
-					Your browser does not support the video tag.
-				</video>
-				<template #placeholder="{ load, modifier }">
-					<picture class="media__mask" :class="modifier">
-						<img
-							srcset="https://unsplash.it/960/540?random&gravity=center"
-							alt="Video thumbnail"
-						/>
-					</picture>
-					<button class="media__trigger" @click="load" :class="modifier">
-						<span class="srOnly" aria-label="Play video">play</span>
-						<svg class="media__icon icon -circle" viewBox="0 0 96 96">
-							<use href="/main-icons-sprite.svg#play" />
-						</svg>
-					</button>
-				</template>
-			</p-lazy>
-		</div>
-	</div>
-	<div class="featureVideo__background"></div>
-	<div class="featureVideo__content">
-		<h3 class="featureVideo__title h3">Heading Placeholder</h3>
-		<p class="featureVideo__text">
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit neque a
-			cursus tristique. Phasellus eleifend consectetur felis, in eleifend
-			nulla vulputate eget.
-		</p>
-	</div>
+  <div class="featureVideo__media">
+    <div class="media">
+      <p-lazy>
+        <video class="media__content" controls playsinline>
+          <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+        <template #placeholder="{ load, modifier }">
+          <picture class="media__mask" :class="modifier">
+            <img srcset="https://unsplash.it/960/540?random&gravity=center" alt="Video thumbnail" />
+          </picture>
+          <button class="media__trigger" @click="load" :class="modifier">
+            <span class="srOnly" aria-label="Play video">play</span>
+            <svg class="media__icon icon -circle" viewBox="0 0 96 96">
+              <use href="/main-icons-sprite.svg#play" />
+            </svg>
+          </button>
+        </template>
+      </p-lazy>
+    </div>
+  </div>
+  <div class="featureVideo__background"></div>
+  <div class="featureVideo__content">
+    <h3 class="featureVideo__title h3">Heading Placeholder</h3>
+    <p class="featureVideo__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit neque a cursus tristique. Phasellus eleifend consectetur felis, in eleifend nulla vulputate eget.</p>
+  </div>
 </div>
diff --git a/resources/styles/molecules/featureVideo/index.scss b/resources/styles/molecules/featureVideo/index.scss
index 0fda4dc..9944b3d 100644
--- a/resources/styles/molecules/featureVideo/index.scss
+++ b/resources/styles/molecules/featureVideo/index.scss
@@ -1,7 +1,6 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .featureVideo {
-
   color: var(--accent-color-text);
   display: grid;
   gap: #{fluid-rems(1.5, 2)};
@@ -54,7 +53,7 @@
 
   &__content {
     display: grid;
-    gap: .75rem;
+    gap: 0.75rem;
     text-align: center;
     justify-items: center;
     width: 100%;
@@ -70,5 +69,4 @@
   &__text {
     margin: 0;
   }
-
 }
diff --git a/resources/styles/molecules/field/field.html b/resources/styles/molecules/field/field.html
index b532bf1..aeefd76 100644
--- a/resources/styles/molecules/field/field.html
+++ b/resources/styles/molecules/field/field.html
@@ -1,32 +1,30 @@
 <label class="field">
   Text field:
-  <input class="input" type="text" placeholder="Text">
+  <input class="input" type="text" placeholder="Text" />
   <div class="field__help">Coaching Text</div>
 </label>
 
-<label class="field">Email: <input class="input" type="email" placeholder="person@internet.tld"></label>
+<label class="field">Email: <input class="input" type="email" placeholder="person@internet.tld" /></label>
 
 <h5>-inline</h5>
 
-<label class="field -inline"><input class="checkbox" type="checkbox"> Checkbox</label>
+<label class="field -inline"><input class="checkbox" type="checkbox" /> Checkbox</label>
 
-<label class="field -inline"><input class="radio" type="radio"> Radio</label>
+<label class="field -inline"><input class="radio" type="radio" /> Radio</label>
 
 <label class="field -inline">
   Text field:
-  <input class="input" type="text" placeholder="Text">
+  <input class="input" type="text" placeholder="Text" />
   <div class="field__help">Coaching Text</div>
 </label>
 
-<label class="field -inline">Email: <input class="input" type="email" placeholder="person@internet.tld"></label>
+<label class="field -inline">Email: <input class="input" type="email" placeholder="person@internet.tld" /></label>
 
 <h5>-reversed</h5>
 
 <label class="field -reversed">
-  <input class="checkbox" type="checkbox"> Checkbox
-  <div class="field__help">
-    Dolor architecto facere!
-  </div>
+  <input class="checkbox" type="checkbox" /> Checkbox
+  <div class="field__help">Dolor architecto facere!</div>
 </label>
 
-<label class="field -reversed"><input class="radio" type="radio"> Radio</label>
+<label class="field -reversed"><input class="radio" type="radio" /> Radio</label>
diff --git a/resources/styles/molecules/field/index.scss b/resources/styles/molecules/field/index.scss
index a0004a4..20c4a9c 100644
--- a/resources/styles/molecules/field/index.scss
+++ b/resources/styles/molecules/field/index.scss
@@ -2,7 +2,7 @@
   $b: &;
 
   display: grid;
-  gap: .5em;
+  gap: 0.5em;
   line-height: 1.5;
   margin-bottom: 1.25em;
   user-select: none;
@@ -10,7 +10,7 @@
   width: max-content;
 
   &__help {
-    font-size: max(.75em, .75rem);
+    font-size: max(0.75em, 0.75rem);
     color: var(--color-gray-600);
   }
 
diff --git a/resources/styles/molecules/index.scss b/resources/styles/molecules/index.scss
index c77ac9e..006291d 100644
--- a/resources/styles/molecules/index.scss
+++ b/resources/styles/molecules/index.scss
@@ -1,15 +1,15 @@
-@forward "accordion";
-@forward "actions";
-@forward "banner";
-@forward "card";
-@forward "checklist";
-@forward "field";
-@forward "list";
-@forward "logoGrid";
-@forward "featureVideo";
-@forward "mobileNavigation";
-@forward "navigation";
-@forward "pagination";
-@forward "sitemap";
-@forward "tabs";
-@forward "testimonial";
+@forward 'accordion';
+@forward 'actions';
+@forward 'banner';
+@forward 'card';
+@forward 'checklist';
+@forward 'field';
+@forward 'list';
+@forward 'logoGrid';
+@forward 'featureVideo';
+@forward 'mobileNavigation';
+@forward 'navigation';
+@forward 'pagination';
+@forward 'sitemap';
+@forward 'tabs';
+@forward 'testimonial';
diff --git a/resources/styles/molecules/list/index.scss b/resources/styles/molecules/list/index.scss
index e96a35a..2e0468e 100644
--- a/resources/styles/molecules/list/index.scss
+++ b/resources/styles/molecules/list/index.scss
@@ -25,22 +25,22 @@ ul {
       border-radius: 1em;
       content: '';
       display: inline grid;
-      height: .5em;
+      height: 0.5em;
       width: 1em;
-      translate: -1.5em calc(.5em * (var(--list-line-height) - .5));
+      translate: -1.5em calc(0.5em * (var(--list-line-height) - 0.5));
     }
-
   }
 
-  ul, ol {
+  ul,
+  ol {
     margin-top: 1rem;
     padding-left: 3rem;
   }
 
   &:where(ul ul) {
     & > li::before {
-      height: .25em;
-      translate: -1.5em calc(.5em * (var(--list-line-height) - .25));
+      height: 0.25em;
+      translate: -1.5em calc(0.5em * (var(--list-line-height) - 0.25));
       background: var(--accent-color-200);
     }
   }
diff --git a/resources/styles/molecules/list/list.html b/resources/styles/molecules/list/list.html
index 4fb4547..34c2aee 100644
--- a/resources/styles/molecules/list/list.html
+++ b/resources/styles/molecules/list/list.html
@@ -12,7 +12,7 @@
     </li>
     <li>Amet laudantium nulla.</li>
   </ul>
-  
+
   <ol>
     <li>Ipsum voluptas cupiditate.</li>
     <li>Adipisicing impedit accusantium!</li>
@@ -24,16 +24,13 @@
         <li>Lorem vero nam ab</li>
       </ol>
     </li>
-    
+
     <li>Amet laudantium nulla.</li>
   </ol>
 </div>
 
-
 <ul class="list">
-  <li>
-    Dolor nulla a illum veniam cumque Quod repudiandae atque tempore deleniti ut beatae culpa. Molestias distinctio sit necessitatibus tenetur aliquam fuga. Ducimus aliquam commodi eum autem atque? Fuga sequi nesciunt
-  </li>
+  <li>Dolor nulla a illum veniam cumque Quod repudiandae atque tempore deleniti ut beatae culpa. Molestias distinctio sit necessitatibus tenetur aliquam fuga. Ducimus aliquam commodi eum autem atque? Fuga sequi nesciunt</li>
   <li>Ipsum velit delectus explicabo eum voluptatem. Debitis</li>
   <li>Lorem aspernatur hic eos dignissimos tempore quia!</li>
 </ul>
@@ -46,52 +43,23 @@
 </ol>
 
 <dl class="list">
-  <dt>
-    Amet iure.
-  </dt>
-  <dd>
-    Ipsum id sequi molestiae doloribus sequi Deserunt quos modi quos saepe voluptate eum vel esse Neque excepturi ratione id modi quo. Suscipit blanditiis officia quod saepe vero Mollitia dolorum magni.
-  </dd>
-  <dt>
-    Adipisicing a nesciunt.
-  </dt>
-  <dd>
-    Amet rem cumque quo asperiores saepe, saepe! Quod natus eveniet dolore ducimus at nisi beatae Iste rerum placeat id laboriosam officia. Corrupti tempora ad hic magni laudantium Cum voluptates aut
-  </dd>
-  <dt>
-    Amet minus corrupti
-  </dt>
-  <dd>
-    Dolor distinctio repellendus aliquid sint necessitatibus. Minus quidem tempora obcaecati provident molestias, odio. Iusto itaque magni facere quos unde Eaque qui quis voluptas nobis minima? Doloribus facere inventore natus fugit.
-  </dd>
-  <dt>
-    Elit commodi voluptatibus.
-  </dt>
-  <dd>
-    Dolor voluptatibus et praesentium aliquam debitis vitae. Saepe nihil enim dicta doloremque expedita. Id consequuntur modi maxime omnis delectus Cum omnis voluptatum molestias eius incidunt? Consequuntur eaque non animi dolore.
-  </dd>
-  <dt>
-    Dolor nulla inventore.
-  </dt>
-  <dd>
-    Ipsum ullam facilis similique labore quis Molestiae modi ratione tenetur cumque aspernatur aliquid Nemo culpa velit corrupti excepturi illum Repellendus voluptates similique fugiat dolorum rem iusto Tenetur animi voluptatibus similique!
-  </dd>
-  <dt>
-    Amet in labore?
-  </dt>
+  <dt>Amet iure.</dt>
+  <dd>Ipsum id sequi molestiae doloribus sequi Deserunt quos modi quos saepe voluptate eum vel esse Neque excepturi ratione id modi quo. Suscipit blanditiis officia quod saepe vero Mollitia dolorum magni.</dd>
+  <dt>Adipisicing a nesciunt.</dt>
+  <dd>Amet rem cumque quo asperiores saepe, saepe! Quod natus eveniet dolore ducimus at nisi beatae Iste rerum placeat id laboriosam officia. Corrupti tempora ad hic magni laudantium Cum voluptates aut</dd>
+  <dt>Amet minus corrupti</dt>
+  <dd>Dolor distinctio repellendus aliquid sint necessitatibus. Minus quidem tempora obcaecati provident molestias, odio. Iusto itaque magni facere quos unde Eaque qui quis voluptas nobis minima? Doloribus facere inventore natus fugit.</dd>
+  <dt>Elit commodi voluptatibus.</dt>
+  <dd>Dolor voluptatibus et praesentium aliquam debitis vitae. Saepe nihil enim dicta doloremque expedita. Id consequuntur modi maxime omnis delectus Cum omnis voluptatum molestias eius incidunt? Consequuntur eaque non animi dolore.</dd>
+  <dt>Dolor nulla inventore.</dt>
+  <dd>Ipsum ullam facilis similique labore quis Molestiae modi ratione tenetur cumque aspernatur aliquid Nemo culpa velit corrupti excepturi illum Repellendus voluptates similique fugiat dolorum rem iusto Tenetur animi voluptatibus similique!</dd>
+  <dt>Amet in labore?</dt>
   <dd>
     Amet eum explicabo provident pariatur magni cumque. Laborum eius ab totam exercitationem dicta. Nostrum minima sint praesentium nobis blanditiis. Fugiat commodi illo nihil reiciendis ab Voluptas in consequatur ea earum.
 
     <dl class="list">
-      <dt>
-        Amet voluptatibus inventore
-      </dt>
-      <dd>
-        Ipsum tenetur nemo omnis rerum modi fugiat aut, voluptas. Dolores minus sunt adipisci suscipit voluptas Tempore ullam explicabo quos facilis soluta recusandae Explicabo velit earum rem consequatur itaque exercitationem. Amet
-      </dd>
+      <dt>Amet voluptatibus inventore</dt>
+      <dd>Ipsum tenetur nemo omnis rerum modi fugiat aut, voluptas. Dolores minus sunt adipisci suscipit voluptas Tempore ullam explicabo quos facilis soluta recusandae Explicabo velit earum rem consequatur itaque exercitationem. Amet</dd>
     </dl>
-    
   </dd>
 </dl>
-
-
diff --git a/resources/styles/molecules/logoGrid/index.scss b/resources/styles/molecules/logoGrid/index.scss
index db7eb77..bd0f9a0 100644
--- a/resources/styles/molecules/logoGrid/index.scss
+++ b/resources/styles/molecules/logoGrid/index.scss
@@ -1,35 +1,35 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .logoGrid {
-    $b: &;
+  $b: &;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: fluid-rems(2, 3);
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  &__item {
+    height: fluid-rems(5, 7.5);
+    max-width: 230px;
+    width: 100%;
+    position: relative;
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: fluid-rems(2, 3);
-    justify-content: center;
     align-items: center;
-    width: 100%;
-
-    &__item {
-        height: fluid-rems(5, 7.5);
-        max-width: 230px;
-        width: 100%;
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
+    justify-content: center;
+  }
 
-    &__img,
-    img {
-        height: 100%;
-        width: 100%;
-        object-fit: contain;
-        display: block;
-        margin-bottom: 0;
-    }
+  &__img,
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+    display: block;
+    margin-bottom: 0;
+  }
 
-    &__link {
-        @include pseudo-link();
-    }
+  &__link {
+    @include pseudo-link();
+  }
 }
diff --git a/resources/styles/molecules/logoGrid/logoGrid.html b/resources/styles/molecules/logoGrid/logoGrid.html
index ada748c..cc8eaa8 100644
--- a/resources/styles/molecules/logoGrid/logoGrid.html
+++ b/resources/styles/molecules/logoGrid/logoGrid.html
@@ -1,38 +1,38 @@
 <ul class="logoGrid">
-    <li class="logoGrid__item">
-        <a href="#" class="logoGrid__link">
-            <span class="srOnly">Logo name</span>
-        </a>
-        <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-    </li>
-    <li class="logoGrid__item">
-        <a href="#" class="logoGrid__link">
-            <span class="srOnly">Logo name</span>
-        </a>
-        <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-    </li>
-    <li class="logoGrid__item">
-        <a href="#" class="logoGrid__link">
-            <span class="srOnly">Logo name</span>
-        </a>
-        <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-    </li>
-    <li class="logoGrid__item">
-        <a href="#" class="logoGrid__link">
-            <span class="srOnly">Logo name</span>
-        </a>
-        <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-    </li>
-    <li class="logoGrid__item">
-        <a href="#" class="logoGrid__link">
-            <span class="srOnly">Logo name</span>
-        </a>
-        <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-    </li>
-    <li class="logoGrid__item">
-        <a href="#" class="logoGrid__link">
-            <span class="srOnly">Logo name</span>
-        </a>
-        <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-    </li>
+  <li class="logoGrid__item">
+    <a href="#" class="logoGrid__link">
+      <span class="srOnly">Logo name</span>
+    </a>
+    <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+  </li>
+  <li class="logoGrid__item">
+    <a href="#" class="logoGrid__link">
+      <span class="srOnly">Logo name</span>
+    </a>
+    <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+  </li>
+  <li class="logoGrid__item">
+    <a href="#" class="logoGrid__link">
+      <span class="srOnly">Logo name</span>
+    </a>
+    <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+  </li>
+  <li class="logoGrid__item">
+    <a href="#" class="logoGrid__link">
+      <span class="srOnly">Logo name</span>
+    </a>
+    <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+  </li>
+  <li class="logoGrid__item">
+    <a href="#" class="logoGrid__link">
+      <span class="srOnly">Logo name</span>
+    </a>
+    <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+  </li>
+  <li class="logoGrid__item">
+    <a href="#" class="logoGrid__link">
+      <span class="srOnly">Logo name</span>
+    </a>
+    <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+  </li>
 </ul>
diff --git a/resources/styles/molecules/mobileNavigation/index.scss b/resources/styles/molecules/mobileNavigation/index.scss
index 9af6c58..82bafa8 100644
--- a/resources/styles/molecules/mobileNavigation/index.scss
+++ b/resources/styles/molecules/mobileNavigation/index.scss
@@ -24,7 +24,7 @@
     background: #0000001a;
     display: grid;
     inset: 0 0 0 auto;
-    padding: .375rem 0;
+    padding: 0.375rem 0;
     place-content: start center;
     position: fixed;
     transition: opacity var(--root-ease-out-fast);
@@ -40,20 +40,19 @@
   &__title {
     display: grid;
     place-content: center;
-    padding: .25rem .5rem;
+    padding: 0.25rem 0.5rem;
     min-height: 4.25rem;
   }
 
-
   &__actions {
     position: absolute;
-    display:flex;
-    gap: .5rem;
+    display: flex;
+    gap: 0.5rem;
   }
 
   &__button,
   &__link {
-    padding: 1rem .5rem 1rem 1.5rem;
+    padding: 1rem 0.5rem 1rem 1.5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
diff --git a/resources/styles/molecules/mobileNavigation/mobileNavigation.html b/resources/styles/molecules/mobileNavigation/mobileNavigation.html
index 034fd5e..d9cab57 100644
--- a/resources/styles/molecules/mobileNavigation/mobileNavigation.html
+++ b/resources/styles/molecules/mobileNavigation/mobileNavigation.html
@@ -1,13 +1,11 @@
 <nav class="mobileNavigation">
   <p-openable class="mobileNavigation__menu button -circle -ghost" label="menu">
     <template #toggle>
-        <svg class="button__icon icon"><use href="/main-icons-sprite.svg#bars" /></svg>
+      <svg class="button__icon icon"><use href="/main-icons-sprite.svg#bars" /></svg>
     </template>
     <template v-slot="{ click }">
       <div class="mobileNavigation__pane" v-scrolllock>
-        <div class="mobileNavigation__title">
-          Menu
-        </div>
+        <div class="mobileNavigation__title">Menu</div>
         <ul class="mobileNavigation__list" v-directionals>
           <li>
             <p-openable class="mobileNavigation__button" name="submenu">
@@ -109,4 +107,3 @@
 <p>Elit ipsam alias maxime pariatur tenetur. Culpa a aspernatur quas blanditiis culpa. Laudantium exercitationem accusantium corrupti vero rerum! Eligendi corporis eveniet eos dignissimos facilis Tempora ab cum sapiente vero placeat.</p>
 <p>Consectetur distinctio temporibus error voluptate nisi recusandae odio quis Enim quam officia ipsam vel consequatur beatae laudantium pariatur est? Distinctio id quos ea repellendus quo Impedit nulla necessitatibus in quisquam.</p>
 <p>Lorem optio eligendi quis architecto laboriosam Similique possimus fugit dolorum sequi atque dolores. Obcaecati corporis labore accusamus fuga voluptatem inventore laboriosam quod perspiciatis. Magni sapiente accusamus veniam harum obcaecati. Quo</p>
-
diff --git a/resources/styles/molecules/navigation/index.scss b/resources/styles/molecules/navigation/index.scss
index 8aaebb3..b5da4f6 100644
--- a/resources/styles/molecules/navigation/index.scss
+++ b/resources/styles/molecules/navigation/index.scss
@@ -18,11 +18,11 @@
 
   &__button {
     display: flex;
-    gap: .5rem;
+    gap: 0.5rem;
 
     &::after {
       content: '';
-      width: .75rem;
+      width: 0.75rem;
       height: 1em;
       background: var(--accent-color);
       transition: rotate var(--root-ease-out-slow);
@@ -45,12 +45,11 @@
       }
 
       &:has(#{$b}__dropdown) {
-        box-shadow: 0 -.5rem 0 inset var(--accent-color);
+        box-shadow: 0 -0.5rem 0 inset var(--accent-color);
       }
     }
 
     &:has(#{$b}__dropdown) {
-
       #{$b}__button {
         color: #000;
 
diff --git a/resources/styles/molecules/navigation/navigation-hoverable.html b/resources/styles/molecules/navigation/navigation-hoverable.html
index 44dbdd3..9000e64 100644
--- a/resources/styles/molecules/navigation/navigation-hoverable.html
+++ b/resources/styles/molecules/navigation/navigation-hoverable.html
@@ -5,10 +5,19 @@
         <template #default>
           <div class="navigation__dropdown">
             <ul>
-              <li><a href=""><span>Consectetur asperiores</span></a></li>
-              <li><a href=""><span>Consectetur asperiores</span></a></li>
-              <li><a href=""><span>Amet porro.</span></a></li>
-              <li><a href=""><span>Ipsum dolorem</span></a><li>
+              <li>
+                <a href=""><span>Consectetur asperiores</span></a>
+              </li>
+              <li>
+                <a href=""><span>Consectetur asperiores</span></a>
+              </li>
+              <li>
+                <a href=""><span>Amet porro.</span></a>
+              </li>
+              <li>
+                <a href=""><span>Ipsum dolorem</span></a>
+              </li>
+              <li></li>
             </ul>
           </div>
         </template>
@@ -17,14 +26,23 @@
     <li class="navigation__item" v-directionals>
       <p-openable class="navigation__button" label="Centered Dropdown" :close-on-blur="false" :hover-or-click="true">
         <template #default>
-        <div class="navigation__dropdown -center">
-          <ul>
-            <li><a href=""><span>Consectetur asperiores</span></a></li>
-            <li><a href=""><span>Consectetur asperiores</span></a></li>
-            <li><a href=""><span>Amet porro.</span></a></li>
-            <li><a href=""><span>Ipsum dolorem</span></a><li>
-          </ul>
-        </div>
+          <div class="navigation__dropdown -center">
+            <ul>
+              <li>
+                <a href=""><span>Consectetur asperiores</span></a>
+              </li>
+              <li>
+                <a href=""><span>Consectetur asperiores</span></a>
+              </li>
+              <li>
+                <a href=""><span>Amet porro.</span></a>
+              </li>
+              <li>
+                <a href=""><span>Ipsum dolorem</span></a>
+              </li>
+              <li></li>
+            </ul>
+          </div>
         </template>
       </p-openable>
     </li>
@@ -34,38 +52,59 @@
           <div class="navigation__dropdown grid -columns-3">
             <div class="cell">
               <h3>Heading</h3>
-              <p>
-                Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-              </p>
+              <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
               <ul>
-                <li><a href=""><span>Consectetur asperiores</span></a></li>
-                <li><a href=""><span>Consectetur asperiores</span></a></li>
-                <li><a href=""><span>Amet porro.</span></a></li>
-                <li><a href=""><span>Ipsum dolorem</span></a><li>
+                <li>
+                  <a href=""><span>Consectetur asperiores</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Consectetur asperiores</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Amet porro.</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Ipsum dolorem</span></a>
+                </li>
+                <li></li>
               </ul>
             </div>
             <div class="cell">
               <h3>Heading</h3>
-              <p>
-                Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-              </p>
+              <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
               <ul>
-                <li><a href=""><span>Consectetur asperiores</span></a></li>
-                <li><a href=""><span>Consectetur asperiores</span></a></li>
-                <li><a href=""><span>Amet porro.</span></a></li>
-                <li><a href=""><span>Ipsum dolorem</span></a><li>
+                <li>
+                  <a href=""><span>Consectetur asperiores</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Consectetur asperiores</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Amet porro.</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Ipsum dolorem</span></a>
+                </li>
+                <li></li>
               </ul>
             </div>
             <div class="cell">
               <h3>Heading</h3>
-              <p>
-                Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-              </p>
+              <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
               <ul>
-                <li><a href=""><span>Consectetur asperiores</span></a></li>
-                <li><a href=""><span>Consectetur asperiores</span></a></li>
-                <li><a href=""><span>Amet porro.</span></a></li>
-                <li><a href=""><span>Ipsum dolorem</span></a><li>
+                <li>
+                  <a href=""><span>Consectetur asperiores</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Consectetur asperiores</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Amet porro.</span></a>
+                </li>
+                <li>
+                  <a href=""><span>Ipsum dolorem</span></a>
+                </li>
+                <li></li>
               </ul>
             </div>
           </div>
@@ -77,10 +116,19 @@ <h3>Heading</h3>
         <template #default>
           <div class="navigation__dropdown -rightAligned">
             <ul>
-              <li><a href=""><span>Consectetur asperiores</span></a></li>
-              <li><a href=""><span>Consectetur asperiores</span></a></li>
-              <li><a href=""><span>Amet porro.</span></a></li>
-              <li><a href=""><span>Ipsum dolorem</span></a><li>
+              <li>
+                <a href=""><span>Consectetur asperiores</span></a>
+              </li>
+              <li>
+                <a href=""><span>Consectetur asperiores</span></a>
+              </li>
+              <li>
+                <a href=""><span>Amet porro.</span></a>
+              </li>
+              <li>
+                <a href=""><span>Ipsum dolorem</span></a>
+              </li>
+              <li></li>
             </ul>
           </div>
         </template>
diff --git a/resources/styles/molecules/navigation/navigation.html b/resources/styles/molecules/navigation/navigation.html
index 5ff24b3..bccbc6a 100644
--- a/resources/styles/molecules/navigation/navigation.html
+++ b/resources/styles/molecules/navigation/navigation.html
@@ -21,14 +21,16 @@
                           <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                           <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                           <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-                          <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+                          <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+                          <li></li>
                         </ul>
                       </div>
                     </template>
                   </p-openable>
                 </li>
                 <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-                <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+                <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+                <li></li>
               </ul>
             </div>
             <div class="cell -span-2">
@@ -48,32 +50,32 @@
                           <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                           <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                           <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-                          <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+                          <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+                          <li></li>
                         </ul>
                       </div>
                     </template>
                   </p-openable>
                 </li>
                 <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-                <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+                <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+                <li></li>
               </ul>
             </div>
             <div class="cell -span-3">
               <div class="card" style="max-width: 300px">
-                  <div class="card__content">
-                      <span class="card__title h3">
-                          Title of card
-                      </span>
-                      <a href="#" class="card__cta link -wide">
-                          Standard Text Link
-                          <svg class="card__ctaIcon link__icon">
-                              <use href="/main-icons-sprite.svg#arrow-right" />
-                          </svg>
-                      </a>
-                  </div>
-                  <div class="card__imageWrapper">
-                      <img src="https://panoramicireland.com/media/k2/items/cache/cb9c495b17bc28a44ffb50c55572ed63_XL.jpg" alt="" class="card__image">
-                  </div>
+                <div class="card__content">
+                  <span class="card__title h3"> Title of card </span>
+                  <a href="#" class="card__cta link -wide">
+                    Standard Text Link
+                    <svg class="card__ctaIcon link__icon">
+                      <use href="/main-icons-sprite.svg#arrow-right" />
+                    </svg>
+                  </a>
+                </div>
+                <div class="card__imageWrapper">
+                  <img src="https://panoramicireland.com/media/k2/items/cache/cb9c495b17bc28a44ffb50c55572ed63_XL.jpg" alt="" class="card__image" />
+                </div>
               </div>
             </div>
           </div>
@@ -88,7 +90,8 @@
               <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
               <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
               <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-              <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+              <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+              <li></li>
             </ul>
           </div>
         </template>
@@ -101,38 +104,35 @@
             <div class="grid -columns-3">
               <div class="cell">
                 <h3>Heading</h3>
-                <p>
-                  Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-                </p>
+                <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
                 <ul class="dropdown__list">
                   <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-                  <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+                  <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+                  <li></li>
                 </ul>
               </div>
               <div class="cell">
                 <h3>Heading</h3>
-                <p>
-                  Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-                </p>
+                <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
                 <ul class="dropdown__list">
                   <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-                  <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+                  <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+                  <li></li>
                 </ul>
               </div>
               <div class="cell">
                 <h3>Heading</h3>
-                <p>
-                  Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-                </p>
+                <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
                 <ul class="dropdown__list">
                   <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-                  <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+                  <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+                  <li></li>
                 </ul>
               </div>
             </div>
@@ -148,7 +148,8 @@ <h3>Heading</h3>
               <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
               <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
               <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
-              <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a><li>
+              <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
+              <li></li>
             </ul>
           </div>
         </template>
diff --git a/resources/styles/molecules/pagination/index.scss b/resources/styles/molecules/pagination/index.scss
index b34bf53..6531109 100644
--- a/resources/styles/molecules/pagination/index.scss
+++ b/resources/styles/molecules/pagination/index.scss
@@ -1,4 +1,4 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .pagination {
   display: flex;
@@ -10,13 +10,13 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    gap: fluid-rems(.5, 1);
+    gap: fluid-rems(0.5, 1);
     width: fit-content;
   }
 
   &__icon {
     aspect-ratio: 1.5;
-    block-size: fluid-rems(.5, 1);
+    block-size: fluid-rems(0.5, 1);
     color: inherit;
   }
 
@@ -33,7 +33,7 @@
     border-radius: 0.25rem;
     color: var(--accent-color-text);
     display: grid;
-    font-size: fluid-rems(.5, 1);
+    font-size: fluid-rems(0.5, 1);
     font-weight: 700;
     line-height: 1;
     width: fluid-rems(2, 2.5);
@@ -44,7 +44,8 @@
   &__link {
     --accent-color: inherit;
     text-decoration: none;
-    transition: background-color var(--duration-fast) var(--ease-out),
+    transition:
+      background-color var(--duration-fast) var(--ease-out),
       color var(--duration-fast) var(--ease-out);
 
     &:hover {
diff --git a/resources/styles/molecules/pagination/pagination.html b/resources/styles/molecules/pagination/pagination.html
index 941404d..67ad2b4 100644
--- a/resources/styles/molecules/pagination/pagination.html
+++ b/resources/styles/molecules/pagination/pagination.html
@@ -1,69 +1,71 @@
 <nav class="pagination accent-secondary" aria-label="Pagination">
-    <ul class="pagination__list">
-        <li class="pagination__item">
-            <button class="pagination__button button" disabled>
-                <span class="srOnly">Previous</span>
-                <svg class="pagination__icon" viewBox="0 0 18 12">
-                <use href="/main-icons-sprite.svg#arrow-left" /></svg>
-            </button>
-        </li>
-        <li class="pagination__item">
-            <span class="pagination__current" aria-label="Page 1" aria-current="page">1</span>
-        </li>
-        <li class="pagination__item">
-            <a class="pagination__link" href="#" aria-label="Page 2">2</a>
-        </li>
-        <li class="pagination__item">
-            <a class="pagination__link" href="#" aria-label="Page 3">3</a>
-        </li>
-        <li class="pagination__item">
-            <span class="pagination__skip">...</span>
-        </li>
-        <li class="pagination__item">
-            <a class="pagination__link" href="#" aria-label="Page 5">5</a>
-        </li>
-        <li class="pagination__item">
-            <a class="pagination__button button" href="#">
-                <span class="srOnly">Next</span>
-                <svg class="pagination__icon" viewBox="0 0 18 12">
-                    <use href="/main-icons-sprite.svg#arrow-right" />
-                </svg>
-            </a>
-        </li>
-    </ul>
+  <ul class="pagination__list">
+    <li class="pagination__item">
+      <button class="pagination__button button" disabled>
+        <span class="srOnly">Previous</span>
+        <svg class="pagination__icon" viewBox="0 0 18 12">
+          <use href="/main-icons-sprite.svg#arrow-left" />
+        </svg>
+      </button>
+    </li>
+    <li class="pagination__item">
+      <span class="pagination__current" aria-label="Page 1" aria-current="page">1</span>
+    </li>
+    <li class="pagination__item">
+      <a class="pagination__link" href="#" aria-label="Page 2">2</a>
+    </li>
+    <li class="pagination__item">
+      <a class="pagination__link" href="#" aria-label="Page 3">3</a>
+    </li>
+    <li class="pagination__item">
+      <span class="pagination__skip">...</span>
+    </li>
+    <li class="pagination__item">
+      <a class="pagination__link" href="#" aria-label="Page 5">5</a>
+    </li>
+    <li class="pagination__item">
+      <a class="pagination__button button" href="#">
+        <span class="srOnly">Next</span>
+        <svg class="pagination__icon" viewBox="0 0 18 12">
+          <use href="/main-icons-sprite.svg#arrow-right" />
+        </svg>
+      </a>
+    </li>
+  </ul>
 </nav>
 
 <nav class="pagination" aria-label="Pagination">
-    <ul class="pagination__list">
-        <li class="pagination__item">
-            <button class="pagination__button button" disabled>
-                <span class="srOnly">Previous</span>
-                <svg class="pagination__icon" viewBox="0 0 18 12">
-                <use href="/main-icons-sprite.svg#arrow-left" /></svg>
-            </button>
-        </li>
-        <li class="pagination__item">
-            <span class="pagination__current" aria-label="Page 1" aria-current="page">1</span>
-        </li>
-        <li class="pagination__item">
-            <a class="pagination__link" href="#" aria-label="Page 2">2</a>
-        </li>
-        <li class="pagination__item">
-            <a class="pagination__link" href="#" aria-label="Page 3">3</a>
-        </li>
-        <li class="pagination__item">
-            <span class="pagination__skip">...</span>
-        </li>
-        <li class="pagination__item">
-            <a class="pagination__link" href="#" aria-label="Page 5">5</a>
-        </li>
-        <li class="pagination__item">
-            <a class="pagination__button button" href="#">
-                <span class="srOnly">Next</span>
-                <svg class="pagination__icon" viewBox="0 0 18 12">
-                    <use href="/main-icons-sprite.svg#arrow-right" />
-                </svg>
-            </a>
-        </li>
-    </ul>
+  <ul class="pagination__list">
+    <li class="pagination__item">
+      <button class="pagination__button button" disabled>
+        <span class="srOnly">Previous</span>
+        <svg class="pagination__icon" viewBox="0 0 18 12">
+          <use href="/main-icons-sprite.svg#arrow-left" />
+        </svg>
+      </button>
+    </li>
+    <li class="pagination__item">
+      <span class="pagination__current" aria-label="Page 1" aria-current="page">1</span>
+    </li>
+    <li class="pagination__item">
+      <a class="pagination__link" href="#" aria-label="Page 2">2</a>
+    </li>
+    <li class="pagination__item">
+      <a class="pagination__link" href="#" aria-label="Page 3">3</a>
+    </li>
+    <li class="pagination__item">
+      <span class="pagination__skip">...</span>
+    </li>
+    <li class="pagination__item">
+      <a class="pagination__link" href="#" aria-label="Page 5">5</a>
+    </li>
+    <li class="pagination__item">
+      <a class="pagination__button button" href="#">
+        <span class="srOnly">Next</span>
+        <svg class="pagination__icon" viewBox="0 0 18 12">
+          <use href="/main-icons-sprite.svg#arrow-right" />
+        </svg>
+      </a>
+    </li>
+  </ul>
 </nav>
diff --git a/resources/styles/molecules/tabs/index.scss b/resources/styles/molecules/tabs/index.scss
index b504461..d994c8e 100644
--- a/resources/styles/molecules/tabs/index.scss
+++ b/resources/styles/molecules/tabs/index.scss
@@ -1,10 +1,10 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 /**
  * this is a component specific property for animating.
  */
 @property --tab__button-box-shadow {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: false;
   initial-value: 0;
 }
@@ -18,7 +18,7 @@
   &__tablist {
     display: flex;
     justify-content: space-between;
-    gap: .5rem;
+    gap: 0.5rem;
     overflow: clip;
 
     @include at(sm) {
@@ -47,7 +47,6 @@
       color var(--root-duration-fast) var(--root-ease-out),
       --tab__button-box-shadow var(--root-duration-fast) var(--root-ease-out);
 
-
     @include at(sm) {
       display: block;
       box-shadow: 0 var(--tab__button-box-shadow) var(--accent-color) inset;
@@ -76,7 +75,6 @@
     flex-shrink: 0;
   }
 
-
   @include at(sm) {
     #{$b}__prev,
     #{$b}__next {
@@ -112,15 +110,15 @@
     @include at(sm) {
       #{$b}__tablist {
         border: 0;
-        gap: .5rem;
+        gap: 0.5rem;
       }
       #{$b}__button {
         white-space: nowrap;
         background: var(--color-gray-100);
-        border-radius: .5rem;
+        border-radius: 0.5rem;
         box-shadow: 0px 1px 1px 0px var(--color-gray-200);
-        padding: .5rem 1rem;
-        margin-bottom: .5rem;
+        padding: 0.5rem 1rem;
+        margin-bottom: 0.5rem;
 
         &:hover {
           background: #fff;
@@ -131,7 +129,7 @@
         &.-selected {
           background: #fff;
           border-radius: 8px 8px 0 0;
-          box-shadow: 0 .5rem 0 #fff;
+          box-shadow: 0 0.5rem 0 #fff;
         }
       }
 
diff --git a/resources/styles/molecules/tabs/tabs--solid.html b/resources/styles/molecules/tabs/tabs--solid.html
index d6c719e..ca546aa 100644
--- a/resources/styles/molecules/tabs/tabs--solid.html
+++ b/resources/styles/molecules/tabs/tabs--solid.html
@@ -1,5 +1,4 @@
 <body style="background: #eee">
-
   <p-tabs class="-solid" :titles="['Solid Tab Title', 'Solid Tab Title', 'Solid Tab Title']">
     <template #tabpanel-1>
       <h3>Lorem dolorem eum at</h3>
@@ -15,7 +14,5 @@ <h3>Adipisicing est corporis ea</h3>
       <h3>Sit repudiandae beatae eaque</h3>
       <p>Ipsum hic libero ab unde voluptatem odio Tenetur reprehenderit sunt delectus ipsam velit. Numquam saepe vero quisquam alias dolores Totam sequi deserunt quam quidem accusamus, id nulla, nemo repellendus animi.</p>
     </template>
-
   </p-tabs>
-
 </body>
diff --git a/resources/styles/molecules/tabs/tabs--vertical.html b/resources/styles/molecules/tabs/tabs--vertical.html
index e91a62f..8796121 100644
--- a/resources/styles/molecules/tabs/tabs--vertical.html
+++ b/resources/styles/molecules/tabs/tabs--vertical.html
@@ -1,5 +1,4 @@
 <p-tabs class="-vertical" :titles="['First Tab', 'Second Tab', 'Third Tab']">
-
   <template #tabpanel-1>
     <h5>Amet dignissimos laboriosam aspernatur!</h5>
     <p>Elit vitae itaque repudiandae necessitatibus eligendi. Fugit quis voluptatibus explicabo fugiat consequuntur Atque distinctio quas pariatur beatae accusantium. Quo voluptatibus distinctio hic in quia. Nostrum pariatur neque libero error maxime?</p>
@@ -14,5 +13,4 @@ <h5>Amet libero veritatis illum.</h5>
     <h5>Dolor cupiditate quibusdam eveniet</h5>
     <p>Consectetur odio tenetur voluptates nemo accusantium architecto, placeat. Minus incidunt a facere delectus modi? Ipsa ratione iste ab consectetur eveniet. Sapiente quisquam quaerat quod distinctio rerum explicabo Mollitia quam sequi?</p>
   </template>
-
 </p-tabs>
diff --git a/resources/styles/molecules/tabs/tabs.html b/resources/styles/molecules/tabs/tabs.html
index b3af261..52a1a2f 100644
--- a/resources/styles/molecules/tabs/tabs.html
+++ b/resources/styles/molecules/tabs/tabs.html
@@ -1,5 +1,4 @@
 <p-tabs :titles="['First Tab', 'Second Tab', 'Third Tab', 'Fourth Tab', 'Fifth Tab']">
-
   <template #tabpanel-1>
     <h3>Elit hic amet neque.</h3>
     <p>Lorem nesciunt nemo excepturi aliquam asperiores sit repellat. Fugit libero enim quis vero harum Suscipit doloremque repellat est rerum id non Esse explicabo harum molestias quos corrupti nobis sit Voluptates</p>
@@ -15,7 +14,6 @@ <h3>Consectetur odit distinctio beatae!</h3>
     <p>Ipsum eaque ipsam asperiores consequatur est libero. Incidunt distinctio non quae veniam illum Laborum est harum sapiente vel suscipit maiores? Dicta quo velit eos ab distinctio, delectus! Autem sunt aperiam!</p>
   </template>
 
-
   <template #tabpanel-4>
     <h3>Consectetur veniam iste consequuntur</h3>
     <p>Elit laborum deleniti illo quidem tempora! Fugiat veritatis suscipit excepturi est odit ex? Adipisci sint quidem aliquid animi velit iure cupiditate Aliquam blanditiis quos culpa voluptatum velit Nemo cupiditate cupiditate</p>
@@ -25,5 +23,4 @@ <h3>Consectetur veniam iste consequuntur</h3>
     <h3>Elit sed eligendi id!</h3>
     <p>Ipsum placeat id architecto sapiente aliquid eaque! Itaque fugit animi necessitatibus aut incidunt Et eligendi error quis molestiae delectus Ut voluptate laudantium possimus corrupti tempora, veritatis! Veritatis facilis illo adipisci.</p>
   </template>
-
 </p-tabs>
diff --git a/resources/styles/molecules/testimonial/index.scss b/resources/styles/molecules/testimonial/index.scss
index 16c4c3b..e9a14eb 100644
--- a/resources/styles/molecules/testimonial/index.scss
+++ b/resources/styles/molecules/testimonial/index.scss
@@ -1,131 +1,131 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .testimonial {
-    $b: &;
+  $b: &;
 
-    display: grid;
-    grid: "quote" 1fr "footer" auto;
-    gap: 1rem;
-    margin-left: 0;
-    padding-left: 0;
-    box-shadow: none;
+  display: grid;
+  grid: 'quote' 1fr 'footer' auto;
+  gap: 1rem;
+  margin-left: 0;
+  padding-left: 0;
+  box-shadow: none;
 
-    &:has(&__icon) {
-      grid: "icon quote" 1fr "footer footer" auto;
+  &:has(&__icon) {
+    grid: 'icon quote' 1fr 'footer footer' auto;
 
-      @include at(md) {
-        grid: "icon quote" 1fr "_ footer" auto;
-      }
+    @include at(md) {
+      grid: 'icon quote' 1fr '_ footer' auto;
     }
-
-    &__content {
-        grid-area: quote;
-        line-height: 2;
-        margin-bottom: 0;
+  }
+
+  &__content {
+    grid-area: quote;
+    line-height: 2;
+    margin-bottom: 0;
+  }
+
+  &__citationPhotoWrapper {
+    height: 4rem;
+    aspect-ratio: 1;
+    border-radius: 4rem;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  &__citationPhoto {
+    @include image-fit(cover);
+  }
+
+  &__citation {
+    color: var(--root-color-headings);
+    line-height: 1.5;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 1rem;
+    margin-bottom: 0;
+  }
+
+  &__citationTitle {
+    display: block;
+    color: var(--root-color);
+    font-weight: 400;
+    font-size: 1rem;
+  }
+
+  &__footer {
+    grid-area: footer;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 0;
+  }
+
+  &__icon {
+    --icon-fill-color: var(--accent-color-600);
+    grid-area: icon;
+    height: 2.0625rem;
+    justify-self: end;
+    min-width: 2rem;
+    transform: translateY(-50%);
+  }
+
+  &.-featured {
+    column-gap: 2rem;
+
+    #{$b}__content {
+      font-size: 1.5rem;
+      line-height: 1.5rem;
     }
 
-    &__citationPhotoWrapper {
-        height: 4rem;
-        aspect-ratio: 1;
-        border-radius: 4rem;
-        overflow: hidden;
-        flex-shrink: 0;
+    #{$b}__citationPhotoWrapper {
+      height: 6rem;
     }
 
-    &__citationPhoto {
-        @include image-fit(cover);
+    #{$b}__citation {
+      font-size: 1.25rem;
+      line-height: 1.625;
     }
 
-    &__citation {
-        color: var(--root-color-headings);
-        line-height: 1.5;
-        font-style: normal;
-        font-weight: 700;
-        font-size: 1rem;
-        margin-bottom: 0;
+    #{$b}__icon {
+      inline-size: 4rem;
+      width: 4.0625rem;
     }
+  }
 
-    &__citationTitle {
-        display: block;
-        color: var(--root-color);
-        font-weight: 400;
-        font-size: 1rem;
-    }
+  &.-aside {
+    grid-template-columns: 5.5rem 1fr;
+    column-gap: 1.5rem;
 
-    &__footer {
-        grid-area: footer;
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        margin-top: 0;
+    @include at(md) {
+      row-gap: 0;
     }
 
-    &__icon {
-        --icon-fill-color: var(--accent-color-600);
-        grid-area: icon;
-        height: 2.0625rem;
-        justify-self: end;
-        min-width: 2rem;
-        transform: translateY(-50%);
-    }
+    #{$b}__content {
+      grid-column: 1 / 3;
+      grid-row: 2 / 3;
 
-    &.-featured {
-        column-gap: 2rem;
-
-        #{$b}__content {
-            font-size: 1.5rem;
-            line-height: 1.5rem;
-        }
+      @include at(md) {
+        grid-column: 2 / 3;
+      }
+    }
 
-        #{$b}__citationPhotoWrapper {
-            height: 6rem;
-        }
+    #{$b}__citationPhotoWrapper {
+      height: 5.5rem;
+    }
 
-        #{$b}__citation {
-            font-size: 1.25rem;
-            line-height: 1.625;
-        }
+    #{$b}__citationTitle {
+      font-size: 0.75rem;
+    }
 
-        #{$b}__icon {
-            inline-size: 4rem;
-            width: 4.0625rem;
-        }
+    #{$b}__footer {
+      grid-column: 1 / 3;
+      grid-row: 1 / 2;
+      gap: 1.5rem;
     }
 
-    &.-aside {
-        grid-template-columns: 5.5rem 1fr;
-        column-gap: 1.5rem;
-
-        @include at(md) {
-            row-gap: 0;
-        }
-
-        #{$b}__content {
-            grid-column: 1 / 3;
-            grid-row: 2 / 3;
-
-            @include at(md) {
-                grid-column: 2 / 3;
-            }
-        }
-
-        #{$b}__citationPhotoWrapper {
-            height: 5.5rem;
-        }
-
-        #{$b}__citationTitle {
-            font-size: .75rem;
-        }
-
-        #{$b}__footer {
-            grid-column: 1 / 3;
-            grid-row: 1 / 2;
-            gap: 1.5rem;
-        }
-
-        #{$b}__icon {
-            grid-column: 1 / 2;
-            grid-row: 2 / 3;
-        }
+    #{$b}__icon {
+      grid-column: 1 / 2;
+      grid-row: 2 / 3;
     }
+  }
 }
diff --git a/resources/styles/molecules/testimonial/testimonial--aside.html b/resources/styles/molecules/testimonial/testimonial--aside.html
index 7ae8779..e5abe6e 100644
--- a/resources/styles/molecules/testimonial/testimonial--aside.html
+++ b/resources/styles/molecules/testimonial/testimonial--aside.html
@@ -1,16 +1,12 @@
 <blockquote class="testimonial -aside">
-    <p class="testimonial__content">
-        Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!
-    </p>
-    <footer class="testimonial__footer">
-        <div class="testimonial__citationPhotoWrapper">
-            <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
-        </div>
-        <cite class="testimonial__citation">
-            Firstnamerson Lastname
-            <span class="testimonial__citationTitle">
-                Director of Important Titles, CorporateCorp
-            </span>
-        </cite>
-    </footer>
-</blockquote>
\ No newline at end of file
+  <p class="testimonial__content">Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!</p>
+  <footer class="testimonial__footer">
+    <div class="testimonial__citationPhotoWrapper">
+      <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto" />
+    </div>
+    <cite class="testimonial__citation">
+      Firstnamerson Lastname
+      <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
+    </cite>
+  </footer>
+</blockquote>
diff --git a/resources/styles/molecules/testimonial/testimonial--featured.html b/resources/styles/molecules/testimonial/testimonial--featured.html
index 153fbbe..15dd942 100644
--- a/resources/styles/molecules/testimonial/testimonial--featured.html
+++ b/resources/styles/molecules/testimonial/testimonial--featured.html
@@ -1,19 +1,15 @@
 <blockquote class="testimonial -featured">
-    <svg class="testimonial__icon icon" role="presentation">
-        <use href="/main-icons-sprite.svg#quote" />
-    </svg>
-    <p class="testimonial__content">
-        Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!
-    </p>
-    <footer class="testimonial__footer">
-        <div class="testimonial__citationPhotoWrapper">
-            <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
-        </div>
-        <cite class="testimonial__citation">
-            Firstnamerson Lastname
-            <span class="testimonial__citationTitle">
-                Director of Important Titles, CorporateCorp
-            </span>
-        </cite>
-    </footer>
+  <svg class="testimonial__icon icon" role="presentation">
+    <use href="/main-icons-sprite.svg#quote" />
+  </svg>
+  <p class="testimonial__content">Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!</p>
+  <footer class="testimonial__footer">
+    <div class="testimonial__citationPhotoWrapper">
+      <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto" />
+    </div>
+    <cite class="testimonial__citation">
+      Firstnamerson Lastname
+      <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
+    </cite>
+  </footer>
 </blockquote>
diff --git a/resources/styles/molecules/testimonial/testimonial.html b/resources/styles/molecules/testimonial/testimonial.html
index dfa0ecb..2a208fb 100644
--- a/resources/styles/molecules/testimonial/testimonial.html
+++ b/resources/styles/molecules/testimonial/testimonial.html
@@ -1,19 +1,15 @@
 <blockquote class="testimonial">
-    <svg class="testimonial__icon icon accent-primary" role="presentation">
-        <use href="/main-icons-sprite.svg#quote" />
-    </svg>
-    <p class="testimonial__content">
-        Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!
-    </p>
-    <footer class="testimonial__footer">
-        <div class="testimonial__citationPhotoWrapper">
-            <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
-        </div>
-        <cite class="testimonial__citation">
-            Firstnamerson Lastname
-            <span class="testimonial__citationTitle">
-                Director of Important Titles, CorporateCorp
-            </span>
-        </cite>
-    </footer>
+  <svg class="testimonial__icon icon accent-primary" role="presentation">
+    <use href="/main-icons-sprite.svg#quote" />
+  </svg>
+  <p class="testimonial__content">Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!</p>
+  <footer class="testimonial__footer">
+    <div class="testimonial__citationPhotoWrapper">
+      <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto" />
+    </div>
+    <cite class="testimonial__citation">
+      Firstnamerson Lastname
+      <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
+    </cite>
+  </footer>
 </blockquote>
diff --git a/resources/styles/organisms/basicSection/basicSection.html b/resources/styles/organisms/basicSection/basicSection.html
index b58e8c8..7fb7460 100644
--- a/resources/styles/organisms/basicSection/basicSection.html
+++ b/resources/styles/organisms/basicSection/basicSection.html
@@ -1,32 +1,28 @@
 <section class="section basicSection">
   <div class="container">
-  <header class="section__header">
-    <h2 class="h6 accent-primary">Heading Placeholder</h2>
-    <h3>
-      The default section includes a header, footer, and padding.
-    </h3>
-  </header>
-  <div class="basicSection__content -center">
-    <div class="basicSection__text">
-      <p>
-        It will stack on mobile, putting elements in natural content order. <a href="#">Links</a> and other components will use their default colors.
-      </p>
-    </div>
-    <div class="basicSection__media media accent-primary" style="--aspect-ratio: 634 / 368">
-      <p-lazy>
-        <video class="media__content" inert controls autoplay playsinline>
-          <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
-          Your browser does not support the video tag.
-        </video>
-        <template #placeholder="{ load, modifier }">
-          <picture class="media__mask" :class="modifier">
-            <img srcset="https://unsplash.it/634/368?random&gravity=center" alt="">
-          </picture>
-          <button class="media__trigger" @click="load" :class="modifier">
-            <svg class="media__icon icon" viewBox="0 0 96 96"><use href="/main-icons-sprite.svg#play" /></svg>
-          </button>
-        </template>
-      </p-lazy>
+    <header class="section__header">
+      <h2 class="h6 accent-primary">Heading Placeholder</h2>
+      <h3>The default section includes a header, footer, and padding.</h3>
+    </header>
+    <div class="basicSection__content -center">
+      <div class="basicSection__text">
+        <p>It will stack on mobile, putting elements in natural content order. <a href="#">Links</a> and other components will use their default colors.</p>
+      </div>
+      <div class="basicSection__media media accent-primary" style="--aspect-ratio: 634 / 368">
+        <p-lazy>
+          <video class="media__content" inert controls autoplay playsinline>
+            <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
+            Your browser does not support the video tag.
+          </video>
+          <template #placeholder="{ load, modifier }">
+            <picture class="media__mask" :class="modifier">
+              <img srcset="https://unsplash.it/634/368?random&gravity=center" alt="" />
+            </picture>
+            <button class="media__trigger" @click="load" :class="modifier">
+              <svg class="media__icon icon" viewBox="0 0 96 96"><use href="/main-icons-sprite.svg#play" /></svg>
+            </button>
+          </template>
+        </p-lazy>
       </div>
     </div>
   </div>
@@ -34,13 +30,13 @@ <h3>
 
 <section class="section basicSection accent-primary">
   <div class="container">
-  <div class="basicSection__content">
-    <div class="basicSection__image">
-      <div class="placeholder" style="aspect-ratio: 634 / 368"></div>
-    </div>
-    <div class="basicSection__text">
-      <h3>This is section is using .accent-primary.</h3>
-      <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat. </p>
+    <div class="basicSection__content">
+      <div class="basicSection__image">
+        <div class="placeholder" style="aspect-ratio: 634 / 368"></div>
+      </div>
+      <div class="basicSection__text">
+        <h3>This is section is using .accent-primary.</h3>
+        <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat.</p>
       </div>
     </div>
   </div>
@@ -48,13 +44,13 @@ <h3>This is section is using .accent-primary.</h3>
 
 <section class="section basicSection -wide accent-secondary">
   <div class="container">
-  <div class="basicSection__content -center">
-    <div class="basicSection__text -wide">
-      <h3>This is using .accent-secondary and shows how to do two-thirds content.</h3>
-      <p>Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat. </p>
-    </div>
-    <div class="basicSection__image">
-      <div class="placeholder" style="aspect-ratio: 634 / 368"></div>
+    <div class="basicSection__content -center">
+      <div class="basicSection__text -wide">
+        <h3>This is using .accent-secondary and shows how to do two-thirds content.</h3>
+        <p>Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat.</p>
+      </div>
+      <div class="basicSection__image">
+        <div class="placeholder" style="aspect-ratio: 634 / 368"></div>
       </div>
     </div>
   </div>
@@ -62,13 +58,13 @@ <h3>This is using .accent-secondary and shows how to do two-thirds content.</h3>
 
 <section class="section basicSection accent-tertiary">
   <div class="container">
-  <div class="basicSection__content">
-    <div class="basicSection__text">
-      <h3>This is using .accent-tertiary.</h3>
-      <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat. </p>
-      <div class="actions">
-        <a class="button -outline" href="#">Learn More</a>
-        <a class="button accent-primary" href="#">Buy Now</a>
+    <div class="basicSection__content">
+      <div class="basicSection__text">
+        <h3>This is using .accent-tertiary.</h3>
+        <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat.</p>
+        <div class="actions">
+          <a class="button -outline" href="#">Learn More</a>
+          <a class="button accent-primary" href="#">Buy Now</a>
         </div>
       </div>
     </div>
diff --git a/resources/styles/organisms/basicSection/index.scss b/resources/styles/organisms/basicSection/index.scss
index fd2a243..97214e4 100644
--- a/resources/styles/organisms/basicSection/index.scss
+++ b/resources/styles/organisms/basicSection/index.scss
@@ -1,4 +1,4 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .basicSection {
   $b: &;
@@ -11,9 +11,9 @@
     gap: var(--gap);
     grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
 
-  @include at(md) {
-    --columns: 2;
-  }
+    @include at(md) {
+      --columns: 2;
+    }
 
     > * {
       min-width: 0;
@@ -33,7 +33,6 @@
     grid-column: main / main;
   }
 
-
   // Natural content order for mobile
   &__image {
     order: 1;
diff --git a/resources/styles/organisms/basicSection/oneColumn.html b/resources/styles/organisms/basicSection/oneColumn.html
index df764df..aaf1972 100644
--- a/resources/styles/organisms/basicSection/oneColumn.html
+++ b/resources/styles/organisms/basicSection/oneColumn.html
@@ -1,23 +1,19 @@
 <section class="section container basicSection">
   <header class="section__header">
     <h2 class="h6 accent-primary">Heading Placeholder</h2>
-    <h3>
-      Ipsum nihil earum blanditiis dolore mollitia Adipisci voluptate.
-    </h3>
-    <p>
-      Elit numquam corrupti magni sapiente non? Tenetur corporis ipsa voluptatibus vitae numquam Exercitationem distinctio vero nesciunt fuga molestiae Repellat dignissimos cumque est quisquam veniam Repellat nobis earum quo distinctio repellendus!
-    </p>
+    <h3>Ipsum nihil earum blanditiis dolore mollitia Adipisci voluptate.</h3>
+    <p>Elit numquam corrupti magni sapiente non? Tenetur corporis ipsa voluptatibus vitae numquam Exercitationem distinctio vero nesciunt fuga molestiae Repellat dignissimos cumque est quisquam veniam Repellat nobis earum quo distinctio repellendus!</p>
   </header>
   <div class="basicSection__content">
     <div class="basicSection__media media accent-primary" style="--aspect-ratio: 634 / 368">
       <p-lazy>
         <video class="media__content" inert controls autoplay playsinline>
-          <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
+          <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
           Your browser does not support the video tag.
         </video>
         <template #placeholder="{ load, modifier }">
           <picture class="media__mask" :class="modifier">
-            <img class="media__maskImg" srcset="https://unsplash.it/634/368?random&gravity=center" alt="">
+            <img class="media__maskImg" srcset="https://unsplash.it/634/368?random&gravity=center" alt="" />
           </picture>
           <button class="media__trigger" @click="load" :class="modifier">
             <svg class="media__icon icon" viewBox="0 0 96 96"><use href="/main-icons-sprite.svg#play" /></svg>
@@ -27,9 +23,7 @@ <h3>
     </div>
   </div>
   <footer class="section__footer">
-    <p>
-      Amet omnis eos omnis error beatae deleniti. Veritatis tempore vero!
-    </p>
+    <p>Amet omnis eos omnis error beatae deleniti. Veritatis tempore vero!</p>
     <div class="actions">
       <a class="button" href="#">Learn More</a>
     </div>
@@ -39,9 +33,7 @@ <h3>
 <section class="section container basicSection accent-primary">
   <header class="section__header">
     <h2 class="h6">Heading Placeholder</h2>
-    <h3>
-      Ipsum nihil earum blanditiis dolore mollitia Adipisci voluptate.
-    </h3>
+    <h3>Ipsum nihil earum blanditiis dolore mollitia Adipisci voluptate.</h3>
   </header>
   <div class="basicSection__content">
     <div class="basicSection__image">
@@ -55,7 +47,7 @@ <h3>
     <div class="basicSection__text">
       <h2 class="h6">Heading Placeholder</h2>
       <h3>Adipisicing tempora culpa a unde molestiae. Tenetur ducimus facilis.</h3>
-      <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat. </p>
+      <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat.</p>
     </div>
   </div>
 </section>
diff --git a/resources/styles/organisms/callout/callout--split.html b/resources/styles/organisms/callout/callout--split.html
index 6839289..a64c8b0 100644
--- a/resources/styles/organisms/callout/callout--split.html
+++ b/resources/styles/organisms/callout/callout--split.html
@@ -1,16 +1,16 @@
 <section class="section callout">
-    <div class="container">
-        <div class="grid -columns-2">
-            <picture class="cell">
-                <img src="https://unsplash.it/1000/500?random&gravity=center" alt="">
-            </picture>
-            <div class="cell">
-                <h3 class="callout__title">Suspendisse vitae velit malesuada, dapibus lacus malesuada ex.</h3>
-                <div class="callout__actions">
-                    <button class="button accent-primary">Default Button</button>
-                    <button class="button -outline accent-primary">Learn More</button>
-                </div>
-            </div>
+  <div class="container">
+    <div class="grid -columns-2">
+      <picture class="cell">
+        <img src="https://unsplash.it/1000/500?random&gravity=center" alt="" />
+      </picture>
+      <div class="cell">
+        <h3 class="callout__title">Suspendisse vitae velit malesuada, dapibus lacus malesuada ex.</h3>
+        <div class="callout__actions">
+          <button class="button accent-primary">Default Button</button>
+          <button class="button -outline accent-primary">Learn More</button>
         </div>
+      </div>
     </div>
+  </div>
 </section>
diff --git a/resources/styles/organisms/callout/callout.html b/resources/styles/organisms/callout/callout.html
index 10126ff..ea3d1a9 100644
--- a/resources/styles/organisms/callout/callout.html
+++ b/resources/styles/organisms/callout/callout.html
@@ -1,47 +1,47 @@
 <section class="section callout">
-    <div class="container">
-        <div class="grid -columns-12">
-            <h3 class="callout__title cell -span-6 -center">Suspendisse vitae velit malesuada, dapibus lacus malesuada ex.</h3>
-            <div class="callout__actions cell -span-6 -center">
-                <button class="button accent-primary">Default Button</button>
-                <button class="button -outline accent-primary">Learn More</button>
-            </div>
-        </div>
+  <div class="container">
+    <div class="grid -columns-12">
+      <h3 class="callout__title cell -span-6 -center">Suspendisse vitae velit malesuada, dapibus lacus malesuada ex.</h3>
+      <div class="callout__actions cell -span-6 -center">
+        <button class="button accent-primary">Default Button</button>
+        <button class="button -outline accent-primary">Learn More</button>
+      </div>
     </div>
+  </div>
 </section>
 
 <section class="section callout accent-primary">
-    <div class="container">
-        <div class="grid -columns-12">
-            <h3 class="callout__title cell -span-6 -center">This callout uses .accent-primary.</h3>
-            <div class="callout__actions cell -span-6 -center">
-                <button class="button accent-white">Default Button</button>
-                <button class="button -outline accent-white">Learn More</button>
-            </div>
-        </div>
+  <div class="container">
+    <div class="grid -columns-12">
+      <h3 class="callout__title cell -span-6 -center">This callout uses .accent-primary.</h3>
+      <div class="callout__actions cell -span-6 -center">
+        <button class="button accent-white">Default Button</button>
+        <button class="button -outline accent-white">Learn More</button>
+      </div>
     </div>
+  </div>
 </section>
 
 <section class="section callout accent-secondary">
-    <div class="container">
-        <div class="grid -columns-12">
-            <h3 class="callout__title cell -span-6 -center">This callout uses .accent-secondary.</h3>
-            <div class="callout__actions cell -span-6 -center">
-                <button class="button accent-white">Default Button</button>
-                <button class="button -outline accent-white">Learn More</button>
-            </div>
-        </div>
+  <div class="container">
+    <div class="grid -columns-12">
+      <h3 class="callout__title cell -span-6 -center">This callout uses .accent-secondary.</h3>
+      <div class="callout__actions cell -span-6 -center">
+        <button class="button accent-white">Default Button</button>
+        <button class="button -outline accent-white">Learn More</button>
+      </div>
     </div>
+  </div>
 </section>
 
 <section class="section callout accent-tertiary">
-    <div class="container">
-        <div class="grid -columns-12">
-            <h3 class="callout__title cell -span-6 -center">This callout uses .accent-tertiary.</h3>
-            <div class="callout__actions cell -span-6 -center">
-                <button class="button accent-white">Default Button</button>
-                <button class="button -outline accent-white">Learn More</button>
-            </div>
-        </div>
+  <div class="container">
+    <div class="grid -columns-12">
+      <h3 class="callout__title cell -span-6 -center">This callout uses .accent-tertiary.</h3>
+      <div class="callout__actions cell -span-6 -center">
+        <button class="button accent-white">Default Button</button>
+        <button class="button -outline accent-white">Learn More</button>
+      </div>
     </div>
+  </div>
 </section>
diff --git a/resources/styles/organisms/dialog/dialog.html b/resources/styles/organisms/dialog/dialog.html
index 03406d0..0356753 100644
--- a/resources/styles/organisms/dialog/dialog.html
+++ b/resources/styles/organisms/dialog/dialog.html
@@ -5,7 +5,5 @@
     </button>
   </form>
   <h4>Dialog Title Area</h4>
-  <p>
-    Donec sit amet vestibulum turpis. Ut eget nibh pretium ipsum auctor pharetra. Curabitur maximus tristique pellentesque. Etiam pulvinar, tortor sed finibus scelerisque, neque libero vehicula neque, ut molestie mauris risus ac dui. Quisque vel imperdiet leo.
-  </p>
+  <p>Donec sit amet vestibulum turpis. Ut eget nibh pretium ipsum auctor pharetra. Curabitur maximus tristique pellentesque. Etiam pulvinar, tortor sed finibus scelerisque, neque libero vehicula neque, ut molestie mauris risus ac dui. Quisque vel imperdiet leo.</p>
 </dialog>
diff --git a/resources/styles/organisms/dialog/index.scss b/resources/styles/organisms/dialog/index.scss
index c10c2d6..1babb5b 100644
--- a/resources/styles/organisms/dialog/index.scss
+++ b/resources/styles/organisms/dialog/index.scss
@@ -10,7 +10,7 @@ dialog {
 
   &__close {
     position: absolute;
-    right: .75rem;
-    top: .75rem;
+    right: 0.75rem;
+    top: 0.75rem;
   }
 }
diff --git a/resources/styles/organisms/featuredTestimonials/featuredTestimonials.html b/resources/styles/organisms/featuredTestimonials/featuredTestimonials.html
index fcb902a..6652822 100644
--- a/resources/styles/organisms/featuredTestimonials/featuredTestimonials.html
+++ b/resources/styles/organisms/featuredTestimonials/featuredTestimonials.html
@@ -1,60 +1,48 @@
 <section class="section featuredTestimonials">
-    <div class="container">
-        <h2 class="featuredTestimonials__title">
-            <svg class="featuredTestimonials__titleIcon icon accent-primary" role="presentation">
-                <use href="/main-icons-sprite.svg#quote" />
-            </svg>
-            Some of our thoughtful testimonials.
-        </h2>
-        <div class="featuredTestimonials__container">
-            <blockquote class="featuredTestimonials__testimonial testimonial -aside">
-                <p class="testimonial__content">
-                    Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!
-                </p>
-                <footer class="testimonial__footer">
-                    <div class="testimonial__citationPhotoWrapper">
-                        <img src="https://picsum.photos/400" alt="Photo of Abraham Lincoln" class="testimonial__citationPhoto">
-                    </div>
-                    <cite class="testimonial__citation">
-                        Firstnamerson Lastname
-                        <span class="testimonial__citationTitle">
-                            Director of Important Titles, CorporateCorp
-                        </span>
-                    </cite>
-                </footer>
-            </blockquote>
-            <blockquote class="featuredTestimonials__testimonial testimonial -aside">
-                <p class="testimonial__content">
-                    Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!
-                </p>
-                <footer class="testimonial__footer">
-                    <div class="testimonial__citationPhotoWrapper">
-                        <img src="https://picsum.photos/400" alt="Photo of Abraham Lincoln" class="testimonial__citationPhoto">
-                    </div>
-                    <cite class="testimonial__citation">
-                        Firstnamerson Lastname
-                        <span class="testimonial__citationTitle">
-                            Director of Important Titles, CorporateCorp
-                        </span>
-                    </cite>
-                </footer>
-            </blockquote>
-            <blockquote class="featuredTestimonials__testimonial testimonial -aside">
-                <p class="testimonial__content">
-                    Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!
-                </p>
-                <footer class="testimonial__footer">
-                    <div class="testimonial__citationPhotoWrapper">
-                        <img src="https://picsum.photos/400" alt="Photo of Abraham Lincoln" class="testimonial__citationPhoto">
-                    </div>
-                    <cite class="testimonial__citation">
-                        Firstnamerson Lastname
-                        <span class="testimonial__citationTitle">
-                            Director of Important Titles, CorporateCorp
-                        </span>
-                    </cite>
-                </footer>
-            </blockquote>
-        </div>
+  <div class="container">
+    <h2 class="featuredTestimonials__title">
+      <svg class="featuredTestimonials__titleIcon icon accent-primary" role="presentation">
+        <use href="/main-icons-sprite.svg#quote" />
+      </svg>
+      Some of our thoughtful testimonials.
+    </h2>
+    <div class="featuredTestimonials__container">
+      <blockquote class="featuredTestimonials__testimonial testimonial -aside">
+        <p class="testimonial__content">Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!</p>
+        <footer class="testimonial__footer">
+          <div class="testimonial__citationPhotoWrapper">
+            <img src="https://picsum.photos/400" alt="Photo of Abraham Lincoln" class="testimonial__citationPhoto" />
+          </div>
+          <cite class="testimonial__citation">
+            Firstnamerson Lastname
+            <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
+          </cite>
+        </footer>
+      </blockquote>
+      <blockquote class="featuredTestimonials__testimonial testimonial -aside">
+        <p class="testimonial__content">Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!</p>
+        <footer class="testimonial__footer">
+          <div class="testimonial__citationPhotoWrapper">
+            <img src="https://picsum.photos/400" alt="Photo of Abraham Lincoln" class="testimonial__citationPhoto" />
+          </div>
+          <cite class="testimonial__citation">
+            Firstnamerson Lastname
+            <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
+          </cite>
+        </footer>
+      </blockquote>
+      <blockquote class="featuredTestimonials__testimonial testimonial -aside">
+        <p class="testimonial__content">Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!</p>
+        <footer class="testimonial__footer">
+          <div class="testimonial__citationPhotoWrapper">
+            <img src="https://picsum.photos/400" alt="Photo of Abraham Lincoln" class="testimonial__citationPhoto" />
+          </div>
+          <cite class="testimonial__citation">
+            Firstnamerson Lastname
+            <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
+          </cite>
+        </footer>
+      </blockquote>
     </div>
-</section>
\ No newline at end of file
+  </div>
+</section>
diff --git a/resources/styles/organisms/featuredTestimonials/index.scss b/resources/styles/organisms/featuredTestimonials/index.scss
index c2b4e64..3d7dd63 100644
--- a/resources/styles/organisms/featuredTestimonials/index.scss
+++ b/resources/styles/organisms/featuredTestimonials/index.scss
@@ -1,26 +1,26 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .featuredTestimonials {
-    &__title {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        font-size: fluid-rems(2, 3);
-        gap: 1.5rem;
-        text-align: center;
-    }
+  &__title {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    font-size: fluid-rems(2, 3);
+    gap: 1.5rem;
+    text-align: center;
+  }
 
-    &__titleIcon {
-        width: fluid-rems(2, 4);
-        height: fluid-rems(2, 4);
-    }
+  &__titleIcon {
+    width: fluid-rems(2, 4);
+    height: fluid-rems(2, 4);
+  }
 
-    &__container {
-        display: grid;
-        gap: 2rem;
+  &__container {
+    display: grid;
+    gap: 2rem;
 
-        @include at(md) {
-          grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
-        }
+    @include at(md) {
+      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
     }
+  }
 }
diff --git a/resources/styles/organisms/form/form.html b/resources/styles/organisms/form/form.html
index 3cd23da..cc1691a 100644
--- a/resources/styles/organisms/form/form.html
+++ b/resources/styles/organisms/form/form.html
@@ -1,31 +1,30 @@
 <div class="container">
-
   <section class="form">
     <h1>Contact Us</h1>
-  
+
     <div class="grid -tight -columns-2">
       <div class="cell">
         <label class="field -wide">
           First Name
-          <input class="input" type="text" placeholder="First">
+          <input class="input" type="text" placeholder="First" />
         </label>
       </div>
       <div class="cell">
         <label class="field -wide">
           Last Name
-          <input class="input" type="text" placeholder="Last">
+          <input class="input" type="text" placeholder="Last" />
         </label>
       </div>
     </div>
 
     <label class="field -wide">
       Email Address
-      <input class="input" type="text" placeholder="address@domain.com">
+      <input class="input" type="text" placeholder="address@domain.com" />
     </label>
 
     <label class="field -wide">
       Title (optional)
-      <input class="input" type="text" placeholder="Role">
+      <input class="input" type="text" placeholder="Role" />
     </label>
 
     <div class="field -wide">
@@ -35,11 +34,10 @@ <h1>Contact Us</h1>
 
     <div class="actions -spaceBetween">
       <label class="actions__action field -inline" for="checkbox-default">
-        <input class="checkbox" type="checkbox" id="checkbox-default">
+        <input class="checkbox" type="checkbox" id="checkbox-default" />
         <span>I agree to the <a href="">Terms and Conditions</a></span>
       </label>
       <button class="actions__action button">Let's Go</button>
     </div>
   </section>
-
 </div>
diff --git a/resources/styles/organisms/hero/hero--gradients.html b/resources/styles/organisms/hero/hero--gradients.html
index 9fa1449..11c357e 100644
--- a/resources/styles/organisms/hero/hero--gradients.html
+++ b/resources/styles/organisms/hero/hero--gradients.html
@@ -1,13 +1,11 @@
 <section class="container hero accent-primary">
   <div class="hero__bg -fade">
-    <picture><img src="https://picsum.photos/seed/9/1920/960"></picture>
+    <picture><img src="https://picsum.photos/seed/9/1920/960" /></picture>
   </div>
   <div class="hero__content">
     <div class="hero__text">
       <h1>This is .-fade</h1>
-      <p>
-        These are solely examples of how to implement CSS gradients and blends on hero backgrounds. This one is a radial gradient centered on the right side of the hero.
-      </p>
+      <p>These are solely examples of how to implement CSS gradients and blends on hero backgrounds. This one is a radial gradient centered on the right side of the hero.</p>
       <div class="actions">
         <a class="button accent-white" href="#">Learn More</a>
         <a class="button -outline-fill accent-white" href="#">Buy Now</a>
@@ -21,7 +19,7 @@ <h1>This is .-fade</h1>
 
 <section class="container hero accent-primary">
   <div class="hero__bg -vignette">
-    <picture><img src="https://picsum.photos/seed/9/1920/960"></picture>
+    <picture><img src="https://picsum.photos/seed/9/1920/960" /></picture>
   </div>
   <div class="hero__content">
     <div class="hero__text">
@@ -40,7 +38,7 @@ <h1>This is .-vignette</h1>
 
 <section class="container hero accent-primary">
   <div class="hero__bg -split">
-    <picture><img src="https://picsum.photos/seed/9/1920/960"></picture>
+    <picture><img src="https://picsum.photos/seed/9/1920/960" /></picture>
   </div>
   <div class="hero__content">
     <div class="hero__text">
@@ -59,7 +57,7 @@ <h1>This is .-split</h1>
 
 <section class="container hero accent-primary">
   <div class="hero__bg -multiply">
-    <picture><img src="https://picsum.photos/seed/9/1920/960"></picture>
+    <picture><img src="https://picsum.photos/seed/9/1920/960" /></picture>
   </div>
   <div class="hero__content">
     <div class="hero__text">
@@ -78,7 +76,7 @@ <h1>This is .-multiply</h1>
 
 <section class="container hero accent-primary">
   <div class="hero__bg -colorize -fade">
-    <picture><img src="https://picsum.photos/seed/9/1920/960"></picture>
+    <picture><img src="https://picsum.photos/seed/9/1920/960" /></picture>
   </div>
   <div class="hero__content">
     <div class="hero__text">
@@ -94,4 +92,3 @@ <h1>This is .-colorize with .-fade</h1>
     </div>
   </div>
 </section>
-
diff --git a/resources/styles/organisms/hero/hero.html b/resources/styles/organisms/hero/hero.html
index 2af63d5..b7ff2f1 100644
--- a/resources/styles/organisms/hero/hero.html
+++ b/resources/styles/organisms/hero/hero.html
@@ -1,7 +1,7 @@
 <section class="hero accent-primary">
   <div class="hero__grid">
     <div class="hero__bg">
-      <picture><img src="https://picsum.photos/1920/960" alt=""></picture>
+      <picture><img src="https://picsum.photos/1920/960" alt="" /></picture>
     </div>
     <div class="container">
       <div class="hero__content">
@@ -66,7 +66,7 @@ <h1>This version is -padded, and it uses .accent-secondary without any text belo
       <div class="hero__content">
         <div class="hero__text">
           <h1>Lastly, this hero the image bleeding to the right edge.</h1>
-          <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat. </p>
+          <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat.</p>
           <div class="actions">
             <a class="button accent-black -outline" href="#">Learn More</a>
             <a class="button accent-primary" href="#">Buy Now</a>
@@ -86,7 +86,7 @@ <h1>Lastly, this hero the image bleeding to the right edge.</h1>
       <div class="hero__content">
         <div class="hero__text">
           <h1>And this one has no image at all; just a bunch of really big text.</h1>
-          <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat. </p>
+          <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat.</p>
           <div class="actions">
             <a class="button -outline-fill accent-white" href="#">Learn More</a>
             <a class="button -ghost accent-white" href="#">Buy Now</a>
diff --git a/resources/styles/organisms/hero/index.scss b/resources/styles/organisms/hero/index.scss
index c847a6b..9ddcb3b 100644
--- a/resources/styles/organisms/hero/index.scss
+++ b/resources/styles/organisms/hero/index.scss
@@ -1,4 +1,4 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .hero {
   $b: &;
@@ -48,48 +48,29 @@
       grid-row: 1 / 2;
     }
 
-    img { 
+    img {
       max-height: 100cqh;
       width: 100%;
       object-fit: cover;
     }
 
-
     &.-fade::after {
-      background: radial-gradient(
-        circle farthest-side at 50% 25%,
-        #0000 35vw,
-        #0002 45vw,
-        #0004
-      );
+      background: radial-gradient(circle farthest-side at 50% 25%, #0000 35vw, #0002 45vw, #0004);
       content: '';
       z-index: 1;
 
       @include at(md) {
-        background: radial-gradient(
-          circle farthest-side at calc(50vw + min(25vw, 325px)),
-          #0004 min(15vw, 195px),
-          #0008 min(25vw, 325px),
-          #000c
-        );
+        background: radial-gradient(circle farthest-side at calc(50vw + min(25vw, 325px)), #0004 min(15vw, 195px), #0008 min(25vw, 325px), #000c);
       }
     }
 
     &.-vignette::after {
-      background: radial-gradient(
-        ellipse closest-side at 50% 35%,
-        #0002 40vw,
-        #0004
-      );
+      background: radial-gradient(ellipse closest-side at 50% 35%, #0002 40vw, #0004);
       content: '';
       z-index: 1;
 
       @include at(md) {
-        background: radial-gradient(
-          ellipse at center,
-          #0004 40%,
-          #000c 80%
-        );
+        background: radial-gradient(ellipse at center, #0004 40%, #000c 80%);
       }
     }
 
@@ -149,7 +130,6 @@
     grid-column: main / main;
   }
 
-
   // Natural content order for mobile
   &__image {
     order: 1;
diff --git a/resources/styles/organisms/index.scss b/resources/styles/organisms/index.scss
index 8dbb915..98965ca 100644
--- a/resources/styles/organisms/index.scss
+++ b/resources/styles/organisms/index.scss
@@ -1,15 +1,15 @@
-@forward "basicSection";
-@forward "callout";
-@forward "dialog";
-@forward "hero";
-@forward "logoCloud";
-@forward "mediaBanner";
-@forward "message";
-@forward "richText";
-@forward "section";
-@forward "siteFooter";
-@forward "siteHeader";
-@forward "slider";
-@forward "stats";
-@forward "table";
-@forward "featuredTestimonials";
+@forward 'basicSection';
+@forward 'callout';
+@forward 'dialog';
+@forward 'hero';
+@forward 'logoCloud';
+@forward 'mediaBanner';
+@forward 'message';
+@forward 'richText';
+@forward 'section';
+@forward 'siteFooter';
+@forward 'siteHeader';
+@forward 'slider';
+@forward 'stats';
+@forward 'table';
+@forward 'featuredTestimonials';
diff --git a/resources/styles/organisms/logoCloud/index.scss b/resources/styles/organisms/logoCloud/index.scss
index 2244419..862f22f 100644
--- a/resources/styles/organisms/logoCloud/index.scss
+++ b/resources/styles/organisms/logoCloud/index.scss
@@ -1,26 +1,26 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .logoCloud {
-    $b: &;
+  $b: &;
 
-    .container {
-        padding-bottom: 2rem;
-    }
+  .container {
+    padding-bottom: 2rem;
+  }
 
-    &__title {
-        margin-bottom: 0;
-    }
-    
-    &.-reduced {
-        .logoGrid__item {
-            height: fluid-rems(2, 3);
-        }
+  &__title {
+    margin-bottom: 0;
+  }
+
+  &.-reduced {
+    .logoGrid__item {
+      height: fluid-rems(2, 3);
     }
+  }
 
-    &.-center {
-        #{$b}__title,
-        #{$b}__description {
-            text-align: center;
-        }
+  &.-center {
+    #{$b}__title,
+    #{$b}__description {
+      text-align: center;
     }
+  }
 }
diff --git a/resources/styles/organisms/logoCloud/logoCloud.html b/resources/styles/organisms/logoCloud/logoCloud.html
index 3eb262b..ca7bbb6 100644
--- a/resources/styles/organisms/logoCloud/logoCloud.html
+++ b/resources/styles/organisms/logoCloud/logoCloud.html
@@ -1,166 +1,165 @@
-
 <section class="section logoCloud">
-    <div class="container">
-        <h2 class="logoCloud__title">Logo Cloud Section Title</h2>
-        <p class="logoCloud__description">A short intro or description can live here to add context before the logos.</p>
-    </div>
+  <div class="container">
+    <h2 class="logoCloud__title">Logo Cloud Section Title</h2>
+    <p class="logoCloud__description">A short intro or description can live here to add context before the logos.</p>
+  </div>
 
-    <div class="logoGrid">
-        <div class="logoGrid__item">
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </div>
-        <div class="logoGrid__item">
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </div>
-        <div class="logoGrid__item">
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </div>
-        <div class="logoGrid__item">
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </div>
-        <div class="logoGrid__item">
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </div>
-        <div class="logoGrid__item">
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </div>
+  <div class="logoGrid">
+    <div class="logoGrid__item">
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </div>
+    <div class="logoGrid__item">
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </div>
+    <div class="logoGrid__item">
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </div>
+    <div class="logoGrid__item">
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </div>
+    <div class="logoGrid__item">
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </div>
+    <div class="logoGrid__item">
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
     </div>
+  </div>
 </section>
 
 <section class="section logoCloud -center">
-    <div class="container">
-        <h2 class="logoCloud__title">Logo Cloud Section Title .-center</h2>
-        <p class="logoCloud__description">A short intro or description can live here to add context before the logos.</p>
-    </div>
+  <div class="container">
+    <h2 class="logoCloud__title">Logo Cloud Section Title .-center</h2>
+    <p class="logoCloud__description">A short intro or description can live here to add context before the logos.</p>
+  </div>
 
-    <div class="logoGrid">
-        <div class="logoGrid__item">
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </div>
-        <div class="logoGrid__item">
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </div>
-        <div class="logoGrid__item">
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </div>
-        <div class="logoGrid__item">
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </div>
-        <div class="logoGrid__item">
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </div>
-        <div class="logoGrid__item">
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </div>
+  <div class="logoGrid">
+    <div class="logoGrid__item">
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </div>
+    <div class="logoGrid__item">
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </div>
+    <div class="logoGrid__item">
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </div>
+    <div class="logoGrid__item">
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
     </div>
+    <div class="logoGrid__item">
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </div>
+    <div class="logoGrid__item">
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </div>
+  </div>
 </section>
 
 <section class="section logoCloud -reduced">
-    <div class="container">
-        <h2 class="logoCloud__title">Logo Cloud with Links</h2>
-    </div>
-    <ul class="logoGrid">
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-        <li class="logoGrid__item">
-            <a href="#" class="logoGrid__link">
-                <span class="srOnly">Logo name</span>
-            </a>
-            <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
-        </li>
-    </ul>
+  <div class="container">
+    <h2 class="logoCloud__title">Logo Cloud with Links</h2>
+  </div>
+  <ul class="logoGrid">
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+    <li class="logoGrid__item">
+      <a href="#" class="logoGrid__link">
+        <span class="srOnly">Logo name</span>
+      </a>
+      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
+    </li>
+  </ul>
 </section>
diff --git a/resources/styles/organisms/mediaBanner/index.scss b/resources/styles/organisms/mediaBanner/index.scss
index 2f8ab11..7fb898c 100644
--- a/resources/styles/organisms/mediaBanner/index.scss
+++ b/resources/styles/organisms/mediaBanner/index.scss
@@ -3,13 +3,13 @@
   width: 100%;
   overflow: hidden;
   display: grid;
-  grid-template-areas: "media";
+  grid-template-areas: 'media';
   --media-banner-aspect-ratio: 65 / 24;
 
   // Container instance - grid and border radius
   &__container {
     display: grid;
-    grid-template-areas: "media";
+    grid-template-areas: 'media';
     border-radius: var(--root-border-radius);
   }
 
@@ -24,7 +24,7 @@
     grid-area: media;
     position: relative;
     width: 100%;
-    
+
     video {
       width: 100%;
       height: auto;
@@ -32,14 +32,14 @@
       display: block;
     }
   }
-  
+
   // Media class (works for both full-width and container)
   .media,
   &__container .media {
     grid-area: media;
     display: grid;
     width: 100%;
-    margin-bottom: 0; 
+    margin-bottom: 0;
     aspect-ratio: var(--media-banner-aspect-ratio);
     // Override section's --accent-color: #fff to use default purple for icons
     --accent-color: var(--color-purple);
@@ -66,30 +66,30 @@
       z-index: 2;
       background: none;
       object-fit: initial;
-      
+
       // Ensure all child elements inherit white color
       * {
         color: inherit;
       }
-      
+
       // Don't override container - let it work with Pronto grid system
       .container {
         // Only add minimal styles that don't break the grid
         width: 100%;
         row-gap: 0;
       }
-      
+
       // Text alignment modifiers
       &.-center {
         align-items: center;
         text-align: center;
       }
-      
+
       &.-left {
         align-items: flex-start;
         text-align: left;
       }
-      
+
       &.-right {
         align-items: flex-end;
         text-align: right;
@@ -109,18 +109,17 @@
   &__title {
     margin-bottom: 1.5rem;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
- }
+  }
 
   &__actions {
     margin-top: 1rem;
   }
 
   &__mask {
-
     .media & {
       grid-area: 1 / 1;
     }
-    
+
     grid-area: media;
     position: relative;
     z-index: 1;
@@ -151,7 +150,7 @@
       z-index: 2; // Above the mask (z-index: 1)
       position: relative;
     }
-    
+
     appearance: none;
     background: transparent;
     border: 0;
@@ -172,5 +171,4 @@
       opacity: 1;
     }
   }
-} 
-
+}
diff --git a/resources/styles/organisms/mediaBanner/mediaBanner.html b/resources/styles/organisms/mediaBanner/mediaBanner.html
index 9a1bdf6..a8d679e 100644
--- a/resources/styles/organisms/mediaBanner/mediaBanner.html
+++ b/resources/styles/organisms/mediaBanner/mediaBanner.html
@@ -1,148 +1,106 @@
 <!-- MediaBanner - Full viewport decorative media (image stretches entirely, section bg won't show) -->
 <section class="section mediaBanner">
-	<img
-		class="mediaBanner__content"
-		src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
-		alt=""
-	/>
+  <img class="mediaBanner__content" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" alt="" />
 </section>
 
 <!-- MediaBanner with video (image stretches entirely, section bg won't show) -->
 <section class="section mediaBanner">
-	<p-lazy>
-		<video class="mediaBanner__content" inert controls autoplay playsinline muted>
-			<source
-				data-src="https://www.w3schools.com/html/mov_bbb.mp4"
-				type="video/mp4"
-			/>
-			Your browser does not support the video tag.
-		</video>
-		<template #placeholder="{ load, modifier }">
-			<div class="media">
-				<picture class="mediaBanner__mask media__mask" :class="modifier">
-					<img
-						src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
-						alt=""
-					/>
-				</picture>
-				<button
-					class="mediaBanner__trigger media__trigger -circle"
-					@click="load"
-					:class="modifier"
-				>
-					<span class="srOnly">play</span>
-					<svg class="media__icon icon -circle" viewBox="0 0 96 96">
-						<use href="/main-icons-sprite.svg#play" />
-					</svg>
-				</button>
-			</div>
-		</template>
-	</p-lazy>
+  <p-lazy>
+    <video class="mediaBanner__content" inert controls autoplay playsinline muted>
+      <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
+    <template #placeholder="{ load, modifier }">
+      <div class="media">
+        <picture class="mediaBanner__mask media__mask" :class="modifier">
+          <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" alt="" />
+        </picture>
+        <button class="mediaBanner__trigger media__trigger -circle" @click="load" :class="modifier">
+          <span class="srOnly">play</span>
+          <svg class="media__icon icon -circle" viewBox="0 0 96 96">
+            <use href="/main-icons-sprite.svg#play" />
+          </svg>
+        </button>
+      </div>
+    </template>
+  </p-lazy>
 </section>
 
 <!-- MediaBanner with video inside container -->
 <section class="section mediaBanner">
-	<div class="container">
-		<h2 class="h3">
-			With Optional Header inside a container
-		</h2>
-		<div class="mediaBanner__container">
-			<p-lazy>
-				<video class="mediaBanner__content" inert controls autoplay playsinline muted>
-					<source
-						data-src="https://www.w3schools.com/html/mov_bbb.mp4"
-						type="video/mp4"
-					/>
-					Your browser does not support the video tag.
-				</video>
-				<template #placeholder="{ load, modifier }">
-					<div class="media">
-						<picture class="mediaBanner__mask media__mask" :class="modifier">
-							<img
-								src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
-								alt=""
-							/>
-						</picture>
-						<button
-							class="mediaBanner__trigger media__trigger -circle"
-							@click="load"
-							:class="modifier"
-						>
-							<span class="srOnly">play</span>
-							<svg class="media__icon icon -circle" viewBox="0 0 96 96">
-								<use href="/main-icons-sprite.svg#play" />
-							</svg>
-						</button>
-					</div>
-				</template>
-			</p-lazy>
-		</div>
-	</div>
+  <div class="container">
+    <h2 class="h3">With Optional Header inside a container</h2>
+    <div class="mediaBanner__container">
+      <p-lazy>
+        <video class="mediaBanner__content" inert controls autoplay playsinline muted>
+          <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+        <template #placeholder="{ load, modifier }">
+          <div class="media">
+            <picture class="mediaBanner__mask media__mask" :class="modifier">
+              <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" alt="" />
+            </picture>
+            <button class="mediaBanner__trigger media__trigger -circle" @click="load" :class="modifier">
+              <span class="srOnly">play</span>
+              <svg class="media__icon icon -circle" viewBox="0 0 96 96">
+                <use href="/main-icons-sprite.svg#play" />
+              </svg>
+            </button>
+          </div>
+        </template>
+      </p-lazy>
+    </div>
+  </div>
 </section>
 
 <!-- MediaBanner with overlay (image stretches entirely, section bg won't show) -->
 <section class="section mediaBanner -withOverlay">
-	<img
-		class="mediaBanner__content"
-		src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
-		alt=""
-	/>
-	<div class="mediaBanner__overlay"></div>
+  <img class="mediaBanner__content" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" alt="" />
+  <div class="mediaBanner__overlay"></div>
 </section>
 
 <!-- MediaBanner with text content - Center alignment (overlay added automatically) -->
 <section class="section mediaBanner -withOverlay accent-primary">
-	<img
-		class="mediaBanner__content"
-		src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
-		alt=""
-	/>
-	<div class="mediaBanner__overlay"></div>
-	<div class="mediaBanner__content -white -center">
-		<div class="container">
-			<div class="mediaBanner__eyebrow">Featured Content</div>
-			<h2 class="mediaBanner__title h3">Center Aligned Headline</h2>
-			<div class="mediaBanner__actions">
-				<button class="button -navy">Call to Action</button>
-			</div>
-		</div>
-	</div>
+  <img class="mediaBanner__content" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" alt="" />
+  <div class="mediaBanner__overlay"></div>
+  <div class="mediaBanner__content -white -center">
+    <div class="container">
+      <div class="mediaBanner__eyebrow">Featured Content</div>
+      <h2 class="mediaBanner__title h3">Center Aligned Headline</h2>
+      <div class="mediaBanner__actions">
+        <button class="button -navy">Call to Action</button>
+      </div>
+    </div>
+  </div>
 </section>
 
 <!-- MediaBanner with text content - Left alignment (overlay added automatically) -->
 <section class="section mediaBanner -withOverlay accent-secondary">
-	<img
-		class="mediaBanner__content"
-		src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
-		alt=""
-	/>
-	<div class="mediaBanner__overlay"></div>
-	<div class="mediaBanner__content -white -left">
-		<div class="container">
-			<div class="mediaBanner__eyebrow">Featured Content</div>
-			<h2 class="mediaBanner__title h3">Left Aligned Headline</h2>
-			<div class="mediaBanner__actions">
-				<button class="button -navy">Call to Action</button>
-			</div>
-		</div>
-	</div>
+  <img class="mediaBanner__content" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" alt="" />
+  <div class="mediaBanner__overlay"></div>
+  <div class="mediaBanner__content -white -left">
+    <div class="container">
+      <div class="mediaBanner__eyebrow">Featured Content</div>
+      <h2 class="mediaBanner__title h3">Left Aligned Headline</h2>
+      <div class="mediaBanner__actions">
+        <button class="button -navy">Call to Action</button>
+      </div>
+    </div>
+  </div>
 </section>
 
 <!-- MediaBanner with text content - Right alignment (overlay added automatically) -->
 <section class="section mediaBanner -withOverlay accent-tertiary">
-	<img
-		class="mediaBanner__content"
-		src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
-		alt=""
-	/>
-	<div class="mediaBanner__overlay"></div>
-	<div class="mediaBanner__content -white -right">
-		<div class="container">
-			<div class="mediaBanner__eyebrow">Featured Content</div>
-			<h2 class="mediaBanner__title h3">Right Aligned Headline</h2>
-			<div class="mediaBanner__actions">
-				<button class="button -navy">Call to Action</button>
-			</div>
-		</div>
-	</div>
+  <img class="mediaBanner__content" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" alt="" />
+  <div class="mediaBanner__overlay"></div>
+  <div class="mediaBanner__content -white -right">
+    <div class="container">
+      <div class="mediaBanner__eyebrow">Featured Content</div>
+      <h2 class="mediaBanner__title h3">Right Aligned Headline</h2>
+      <div class="mediaBanner__actions">
+        <button class="button -navy">Call to Action</button>
+      </div>
+    </div>
+  </div>
 </section>
diff --git a/resources/styles/organisms/message/index.scss b/resources/styles/organisms/message/index.scss
index 3ce0974..07255c9 100644
--- a/resources/styles/organisms/message/index.scss
+++ b/resources/styles/organisms/message/index.scss
@@ -6,10 +6,11 @@
   gap: 1em;
   padding: 1em;
   background: var(--accent-color-50);
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   margin-bottom: 2rem;
-  box-shadow: 0 1px 1px 0 rgba(from var(--accent-color-900) r g b / .2),
-    0 .5rem 1.5rem 0 rgba(from var(--accent-color) r g b / .1);
+  box-shadow:
+    0 1px 1px 0 rgba(from var(--accent-color-900) r g b / 0.2),
+    0 0.5rem 1.5rem 0 rgba(from var(--accent-color) r g b / 0.1);
 
   &__icon {
     --icon-stroke-color: #fff;
@@ -17,7 +18,7 @@
   }
 
   &__content {
-    padding: .25em 0;
+    padding: 0.25em 0;
   }
 
   &__close {
@@ -26,7 +27,7 @@
     background: #0000;
     color: inherit;
     height: 2rem;
-    border-left: 1px solid rgba(from var(--accent-color) r g b / .5);
+    border-left: 1px solid rgba(from var(--accent-color) r g b / 0.5);
     display: grid;
     place-content: center;
     --icon-stroke-width: 1;
diff --git a/resources/styles/organisms/message/message--dark.html b/resources/styles/organisms/message/message--dark.html
index 7f1ef1a..e3f91c9 100644
--- a/resources/styles/organisms/message/message--dark.html
+++ b/resources/styles/organisms/message/message--dark.html
@@ -1,39 +1,31 @@
 <p-dismissable class="message -dark error" v-slot="{ close }">
   <svg class="message__icon icon -square" viewBox="0 0 32 32"><use href="/main-icons-sprite.svg#error" /></svg>
-  <div class="message__content">
-    Message content neque tincidunt, rhoncus sapien ac, volutpat enim.
-  </div>
+  <div class="message__content">Message content neque tincidunt, rhoncus sapien ac, volutpat enim.</div>
   <button class="message__close" @click="close">
-        <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
+    <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
   </button>
 </p-dismissable>
 
 <p-dismissable class="message -dark warning" v-slot="{ close }">
   <svg class="message__icon icon -square" viewBox="0 0 32 32"><use href="/main-icons-sprite.svg#error" /></svg>
-  <div class="message__content">
-    Elit molestiae natus deleniti ipsam modi mollitia iusto quos, quaerat Itaque quasi quae maiores quidem est. Exercitationem optio voluptatem fuga provident dolores Sint dolor facilis dolor mollitia quos? Enim porro.
-  </div>
+  <div class="message__content">Elit molestiae natus deleniti ipsam modi mollitia iusto quos, quaerat Itaque quasi quae maiores quidem est. Exercitationem optio voluptatem fuga provident dolores Sint dolor facilis dolor mollitia quos? Enim porro.</div>
   <button class="message__close" @click="close">
-        <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
+    <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
   </button>
 </p-dismissable>
 
 <p-dismissable class="message -dark success" v-slot="{ close }">
   <svg class="message__icon icon -square" viewBox="0 0 32 32"><use href="/main-icons-sprite.svg#check" /></svg>
-  <div class="message__content">
-    Message content neque tincidunt, rhoncus sapien ac, volutpat enim.
-  </div>
+  <div class="message__content">Message content neque tincidunt, rhoncus sapien ac, volutpat enim.</div>
   <button class="message__close" @click="close">
-        <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
+    <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
   </button>
 </p-dismissable>
 
 <p-dismissable class="message -dark info" v-slot="{ close }">
   <svg class="message__icon icon -square" viewBox="0 0 32 32"><use href="/main-icons-sprite.svg#info" /></svg>
-  <div class="message__content">
-    Message content neque tincidunt, rhoncus sapien ac, volutpat enim.
-  </div>
+  <div class="message__content">Message content neque tincidunt, rhoncus sapien ac, volutpat enim.</div>
   <button class="message__close" @click="close">
-        <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
+    <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
   </button>
 </p-dismissable>
diff --git a/resources/styles/organisms/message/message.html b/resources/styles/organisms/message/message.html
index 1a5faa3..186296f 100644
--- a/resources/styles/organisms/message/message.html
+++ b/resources/styles/organisms/message/message.html
@@ -1,39 +1,31 @@
 <p-dismissable class="message error" v-slot="{ close }">
   <svg class="message__icon icon -square" viewBox="0 0 32 32"><use href="/main-icons-sprite.svg#error" /></svg>
-  <div class="message__content">
-    Message content neque tincidunt, rhoncus sapien ac, volutpat enim.
-  </div>
+  <div class="message__content">Message content neque tincidunt, rhoncus sapien ac, volutpat enim.</div>
   <button class="message__close" @click="close">
-        <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
+    <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
   </button>
 </p-dismissable>
 
 <p-dismissable class="message warning" v-slot="{ close }">
   <svg class="message__icon icon -square" viewBox="0 0 32 32"><use href="/main-icons-sprite.svg#error" /></svg>
-  <div class="message__content">
-    Elit molestiae natus deleniti ipsam modi mollitia iusto quos, quaerat Itaque quasi quae maiores quidem est. Exercitationem optio voluptatem fuga provident dolores Sint dolor facilis dolor mollitia quos? Enim porro.
-  </div>
+  <div class="message__content">Elit molestiae natus deleniti ipsam modi mollitia iusto quos, quaerat Itaque quasi quae maiores quidem est. Exercitationem optio voluptatem fuga provident dolores Sint dolor facilis dolor mollitia quos? Enim porro.</div>
   <button class="message__close" @click="close">
-        <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
+    <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
   </button>
 </p-dismissable>
 
 <p-dismissable class="message success" v-slot="{ close }">
   <svg class="message__icon icon -square" viewBox="0 0 32 32"><use href="/main-icons-sprite.svg#check" /></svg>
-  <div class="message__content">
-    Message content neque tincidunt, rhoncus sapien ac, volutpat enim.
-  </div>
+  <div class="message__content">Message content neque tincidunt, rhoncus sapien ac, volutpat enim.</div>
   <button class="message__close" @click="close">
-        <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
+    <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
   </button>
 </p-dismissable>
 
 <p-dismissable class="message info" v-slot="{ close }">
   <svg class="message__icon icon -square" viewBox="0 0 32 32"><use href="/main-icons-sprite.svg#info" /></svg>
-  <div class="message__content">
-    Message content neque tincidunt, rhoncus sapien ac, volutpat enim.
-  </div>
+  <div class="message__content">Message content neque tincidunt, rhoncus sapien ac, volutpat enim.</div>
   <button class="message__close" @click="close">
-        <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
+    <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
   </button>
 </p-dismissable>
diff --git a/resources/styles/organisms/richText/index.scss b/resources/styles/organisms/richText/index.scss
index c666d06..e52d056 100644
--- a/resources/styles/organisms/richText/index.scss
+++ b/resources/styles/organisms/richText/index.scss
@@ -1,8 +1,7 @@
-@use "../../molecules/list";
-@use "../../organisms/table";
+@use '../../molecules/list';
+@use '../../organisms/table';
 
 .richText {
-
   /**
    * Automatically use list component styles even without the class.
    */
@@ -11,7 +10,7 @@
   ul {
     @extend .list;
   }
-  
+
   table {
     @extend .table;
   }
diff --git a/resources/styles/organisms/richText/richText.html b/resources/styles/organisms/richText/richText.html
index 38d6089..3c2e193 100644
--- a/resources/styles/organisms/richText/richText.html
+++ b/resources/styles/organisms/richText/richText.html
@@ -1,13 +1,9 @@
 <div class="richText">
-  <p>
-  Paragraph ipsum possimus illum debitis enim odio Distinctio praesentium explicabo mollitia voluptatem nostrum sunt. Ut iste dignissimos soluta unde repudiandae. <a href="#">Voluptate et neque</a> non aspernatur aliquid asperiores tenetur amet reprehenderit? Numquam.
-  </p>
+  <p>Paragraph ipsum possimus illum debitis enim odio Distinctio praesentium explicabo mollitia voluptatem nostrum sunt. Ut iste dignissimos soluta unde repudiandae. <a href="#">Voluptate et neque</a> non aspernatur aliquid asperiores tenetur amet reprehenderit? Numquam.</p>
 
-  <hr>
+  <hr />
 
-  <p>
-    Lorem ratione temporibus beatae doloremque?
-  </p>
+  <p>Lorem ratione temporibus beatae doloremque?</p>
 
   <ul>
     <li>Lorem nobis impedit labore quod at qui esse. Quo velit?</li>
@@ -15,34 +11,27 @@
     <li>Ipsum repellat exercitationem rerum eos iste? Impedit quos at dignissimos.</li>
   </ul>
 
-  <p>
-    Consectetur nulla voluptatem a veniam perspiciatis omnis quam. Adipisci fugit explicabo obcaecati hic ab. Repudiandae amet veniam vero sapiente harum Explicabo numquam facilis dolor at numquam Molestiae assumenda laboriosam asperiores.
-  </p>
-  
+  <p>Consectetur nulla voluptatem a veniam perspiciatis omnis quam. Adipisci fugit explicabo obcaecati hic ab. Repudiandae amet veniam vero sapiente harum Explicabo numquam facilis dolor at numquam Molestiae assumenda laboriosam asperiores.</p>
+
   <ol>
     <li>Amet quis hic deleniti fugit obcaecati Libero fuga doloribus corrupti.</li>
     <li>Lorem totam vitae commodi illum ab? Quos quibusdam ducimus dignissimos</li>
     <li>Elit incidunt aut omnis dolorem eaque. Elit tenetur nostrum dolores</li>
   </ol>
 
-  <hr>
-  
+  <hr />
+
   <blockquote>
-    <p>
-      Consectetur amet magnam vitae nisi rem Dolore assumenda unde fuga ex doloremque. Harum veniam eveniet aspernatur maiores ex Eius eaque ab quam dicta sequi! Aut eaque ratione quasi enim voluptate
-    </p>
-    <cite>
-      First Lastername
-    </cite>
+    <p>Consectetur amet magnam vitae nisi rem Dolore assumenda unde fuga ex doloremque. Harum veniam eveniet aspernatur maiores ex Eius eaque ab quam dicta sequi! Aut eaque ratione quasi enim voluptate</p>
+    <cite> First Lastername </cite>
   </blockquote>
 
-  <p>
-  Elit temporibus quos officiis qui unde beatae. Repellendus pariatur temporibus velit sit voluptate Expedita quibusdam eaque quod magnam eaque Sint sequi consequuntur aperiam accusantium porro? <code>Code snippet</code> eaque at saepe
-  </p>
+  <p>Elit temporibus quos officiis qui unde beatae. Repellendus pariatur temporibus velit sit voluptate Expedita quibusdam eaque quod magnam eaque Sint sequi consequuntur aperiam accusantium porro? <code>Code snippet</code> eaque at saepe</p>
 
   <pre>
     module Main where
 
     main :: IO ()
-    main = putStrLn "Hello World!"</pre>
+    main = putStrLn "Hello World!"</pre
+  >
 </div>
diff --git a/resources/styles/organisms/section/section.html b/resources/styles/organisms/section/section.html
index cac8e08..eb7185d 100644
--- a/resources/styles/organisms/section/section.html
+++ b/resources/styles/organisms/section/section.html
@@ -2,20 +2,14 @@
   <div class="container">
     <header class="section__header">
       <h2 class="h6 accent-primary">Section leading subheading</h2>
-      <h2>
-        This is the section heading.
-      </h2>
+      <h2>This is the section heading.</h2>
       <p></p>
     </header>
     <div class="section__content">
-      <p>
-        This if the content of the section, <code>.section__content</code>. Depending on the type of section, this is likely where the bulk of the differentiation occurs.
-      </p>
+      <p>This if the content of the section, <code>.section__content</code>. Depending on the type of section, this is likely where the bulk of the differentiation occurs.</p>
     </div>
     <footer class="section__footer">
-      <p>
-        This is the section footer.
-      </p>
+      <p>This is the section footer.</p>
       <div class="actions">
         <a class="button" href="">Learn More</a>
       </div>
diff --git a/resources/styles/organisms/siteFooter/index.scss b/resources/styles/organisms/siteFooter/index.scss
index 8ef1eef..70749dc 100644
--- a/resources/styles/organisms/siteFooter/index.scss
+++ b/resources/styles/organisms/siteFooter/index.scss
@@ -1,4 +1,4 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .siteFooter {
   $b: &;
@@ -6,20 +6,22 @@
   &__content {
     display: grid;
     gap: var(--gap);
-    grid: "info" "social" "nav" "utility";
+    grid: 'info' 'social' 'nav' 'utility';
 
     @include at(md) {
-      grid: "logo address" auto
-            "social contact"
-            "nav nav"
-            "utility utility"
-            / auto 1fr;
+      grid:
+        'logo address' auto
+        'social contact'
+        'nav nav'
+        'utility utility'
+        / auto 1fr;
     }
     @include at(lg) {
-      grid: "info nav     nav   " auto
-            "info social  social" auto
-            "info utility utility" auto
-            / 1fr 1fr 1fr;
+      grid:
+        'info nav     nav   ' auto
+        'info social  social' auto
+        'info utility utility' auto
+        / 1fr 1fr 1fr;
     }
   }
 
@@ -46,9 +48,9 @@
       display: grid;
       grid: auto / 1fr 1fr 1fr;
 
-       > * {
-         grid-column: span 2;
-       }
+      > * {
+        grid-column: span 2;
+      }
     }
   }
 
@@ -56,7 +58,6 @@
     grid-area: nav;
   }
 
-
   &__social {
     grid-area: social;
     justify-content: space-between;
@@ -70,6 +71,6 @@
     grid-area: utility;
     display: flex;
     flex-flow: row wrap;
-    gap: .5rem 2rem;
+    gap: 0.5rem 2rem;
   }
 }
diff --git a/resources/styles/organisms/siteFooter/siteFooter.html b/resources/styles/organisms/siteFooter/siteFooter.html
index e48dc41..abd5408 100644
--- a/resources/styles/organisms/siteFooter/siteFooter.html
+++ b/resources/styles/organisms/siteFooter/siteFooter.html
@@ -4,20 +4,20 @@
       <aside class="siteFooter__info">
         <a class="siteFooter__logo" href="">
           <svg viewBox="0 0 300 133" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect width="300" height="133" fill="currentColor"/>
+            <rect width="300" height="133" fill="currentColor" />
           </svg>
         </a>
         <div class="siteFooter__address">
           <div class="h5">Address</div>
           <address>
-            123 West Main Street<br>
-            Second Floor<br>
+            123 West Main Street<br />
+            Second Floor<br />
             Townsville, MA 01234
           </address>
           <a href="">Get Directions</a>
         </div>
         <div class="siteFooter__contact">
-          <a href="tel:1234567890">(123) 546 - 7890</a><br>
+          <a href="tel:1234567890">(123) 546 - 7890</a><br />
           <a href="mailto:contact@companycorp.com">contact@companycorp.com</a>
         </div>
       </aside>
@@ -71,20 +71,20 @@
       </div>
       <nav class="siteFooter__social actions">
         <a class="button -square -ghost" href="#">
-            <span class="srOnly">On Facebook</span>
-            <svg class="button__icon -large"><use href="/main-icons-sprite.svg#facebook" /></svg>
+          <span class="srOnly">On Facebook</span>
+          <svg class="button__icon -large"><use href="/main-icons-sprite.svg#facebook" /></svg>
         </a>
         <a class="button -square -ghost" href="#">
-            <span class="srOnly">On Instagram</span>
-            <svg class="button__icon -large"><use href="/main-icons-sprite.svg#instagram" /></svg>
+          <span class="srOnly">On Instagram</span>
+          <svg class="button__icon -large"><use href="/main-icons-sprite.svg#instagram" /></svg>
         </a>
         <a class="button -square -ghost" href="#">
-            <span class="srOnly">On LinkedIn</span>
-            <svg class="button__icon -large"><use href="/main-icons-sprite.svg#linkedin" /></svg>
+          <span class="srOnly">On LinkedIn</span>
+          <svg class="button__icon -large"><use href="/main-icons-sprite.svg#linkedin" /></svg>
         </a>
         <a class="button -square -ghost" href="#">
-            <span class="srOnly">On YouTube</span>
-            <svg class="button__icon -large"><use href="/main-icons-sprite.svg#youtube" /></svg>
+          <span class="srOnly">On YouTube</span>
+          <svg class="button__icon -large"><use href="/main-icons-sprite.svg#youtube" /></svg>
         </a>
       </nav>
       <nav class="siteFooter__utility">
diff --git a/resources/styles/organisms/siteHeader/index.scss b/resources/styles/organisms/siteHeader/index.scss
index b35431c..8241010 100644
--- a/resources/styles/organisms/siteHeader/index.scss
+++ b/resources/styles/organisms/siteHeader/index.scss
@@ -1,4 +1,4 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .siteHeader {
   --gap: var(--root-gap, 16px);
@@ -6,7 +6,7 @@
 
   &__content {
     display: grid;
-    grid: "logo search mobile-nav" auto / auto 1fr auto;
+    grid: 'logo search mobile-nav' auto / auto 1fr auto;
     align-items: center;
     gap: 0 var(--gap);
     position: relative;
@@ -15,7 +15,7 @@
   &__logo {
     grid-area: logo;
     display: grid;
-    padding: .5rem 0;
+    padding: 0.5rem 0;
     align-self: stretch;
 
     svg {
@@ -26,7 +26,7 @@
   &__utilityNav {
     display: none;
     grid-area: utility-nav;
-    font-size: .75rem;
+    font-size: 0.75rem;
     justify-self: end;
     gap: 1.5rem;
   }
@@ -44,9 +44,10 @@
 
   @include at(md) {
     &__content {
-      grid: "logo utility-nav search" auto
-            "primary-nav primary-nav primary-nav" auto
-            / auto 1fr auto;
+      grid:
+        'logo utility-nav search' auto
+        'primary-nav primary-nav primary-nav' auto
+        / auto 1fr auto;
     }
 
     &__primaryNav,
@@ -62,10 +63,11 @@
 
   @include at(lg) {
     &__content {
-      grid: "logo utility-nav search" auto
-            "logo spacer spacer" auto
-            "logo primary-nav primary-nav" auto
-            / auto 1fr auto;
+      grid:
+        'logo utility-nav search' auto
+        'logo spacer spacer' auto
+        'logo primary-nav primary-nav' auto
+        / auto 1fr auto;
     }
   }
 }
diff --git a/resources/styles/organisms/siteHeader/siteHeader.html b/resources/styles/organisms/siteHeader/siteHeader.html
index d446a75..7bdbf4d 100644
--- a/resources/styles/organisms/siteHeader/siteHeader.html
+++ b/resources/styles/organisms/siteHeader/siteHeader.html
@@ -1,238 +1,278 @@
 <header class="siteHeader">
   <div class="container">
     <div class="siteHeader__content">
-    <a class="siteHeader__logo" href="">
-      <svg viewBox="0 0 300 133" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect width="300" height="133" fill="currentColor"/>
-      </svg>
-    </a>
-    <nav class="siteHeader__utilityNav navigation">
-      <ul class="navigation__list">
-        <li class="navigation__item">
-          <p-openable class="navigation__button" label="Utility Dropdown" :close-on-blur="false">
-            <template #default>
-              <div class="navigation__dropdown dropdown">
-                <ul class="dropdown__list">
-                  <li class="dropdown__item">
-                    <a class="dropdown__link" href=""><span>Elit?</span></a>
-                  </li>
-                  <li class="dropdown__item">
-                    <a class="dropdown__link" href=""><span>Dolor.</span></a>
-                  </li>
-                  <li class="dropdown__item">
-                    <a class="dropdown__link" href=""><span>Adipisicing!</span></a>
-                  </li>
-                  <li class="dropdown__item">
-                    <a class="dropdown__link" href=""><span>Amet</span></a>
-                  </li>
-                  <li class="dropdown__item">
-                    <a class="dropdown__link" href=""><span>Adipisicing</span></a>
-                  </li>
-                </ul>
-              </div>
-            </template>
-          </p-openable>
-        </li>
-        <li class="navigation__item">
-          <a class="navigation__link" href="#">Contact</a>
-        </li>
-      </ul>
-    </nav>
-    <div class="siteHeader__search search">
-      <svg class="search__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg>
-      <input class="search__input input" type="search" placeholder="Search">
-    </div>
-    <nav class="siteHeader__mobileNav mobileNavigation">
-      <p-openable class="mobileNavigation__menu button -circle -ghost" label="menu">
-        <template #toggle>
+      <a class="siteHeader__logo" href="">
+        <svg viewBox="0 0 300 133" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="300" height="133" fill="currentColor" />
+        </svg>
+      </a>
+      <nav class="siteHeader__utilityNav navigation">
+        <ul class="navigation__list">
+          <li class="navigation__item">
+            <p-openable class="navigation__button" label="Utility Dropdown" :close-on-blur="false">
+              <template #default>
+                <div class="navigation__dropdown dropdown">
+                  <ul class="dropdown__list">
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Elit?</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Dolor.</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Adipisicing!</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Amet</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Adipisicing</span></a>
+                    </li>
+                  </ul>
+                </div>
+              </template>
+            </p-openable>
+          </li>
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">Contact</a>
+          </li>
+        </ul>
+      </nav>
+      <div class="siteHeader__search search">
+        <svg class="search__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg>
+        <input class="search__input input" type="search" placeholder="Search" />
+      </div>
+      <nav class="siteHeader__mobileNav mobileNavigation">
+        <p-openable class="mobileNavigation__menu button -circle -ghost" label="menu">
+          <template #toggle>
             <svg class="button__icon icon"><use href="/main-icons-sprite.svg#bars" /></svg>
-        </template>
-        <template v-slot="{ click }">
-          <div class="mobileNavigation__pane" v-scrolllock>
-            <div class="mobileNavigation__title">
-              Menu
-            </div>
-            <ul class="mobileNavigation__list" v-directionals>
-              <li class="dropdown__item">
-                <p-openable class="mobileNavigation__button" name="submenu">
-                  <template #toggle>
-                    Submenu
-                    <svg class="icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
-                  </template>
-                  <template v-slot="{ click }">
-                    <div class="mobileNavigation__pane">
-                      <div class="mobileNavigation__title">
-                        <div class="mobileNavigation__actions">
-                          <button class="button -circle -ghost" @click.stopPropagation="click" tabindex="-1">
-                            <svg class="icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
-                          </button>
+          </template>
+          <template v-slot="{ click }">
+            <div class="mobileNavigation__pane" v-scrolllock>
+              <div class="mobileNavigation__title">Menu</div>
+              <ul class="mobileNavigation__list" v-directionals>
+                <li class="dropdown__item">
+                  <p-openable class="mobileNavigation__button" name="submenu">
+                    <template #toggle>
+                      Submenu
+                      <svg class="icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
+                    </template>
+                    <template v-slot="{ click }">
+                      <div class="mobileNavigation__pane">
+                        <div class="mobileNavigation__title">
+                          <div class="mobileNavigation__actions">
+                            <button class="button -circle -ghost" @click.stopPropagation="click" tabindex="-1">
+                              <svg class="icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
+                            </button>
+                          </div>
+                          Menu
                         </div>
-                        Menu
+                        <ul class="mobileNavigation__list" v-directionals>
+                          <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
+                          <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
+                          <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Amet porro.</a></li>
+                          <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Ipsum dolorem</a></li>
+                        </ul>
                       </div>
-                      <ul class="mobileNavigation__list" v-directionals>
-                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
-                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
-                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Amet porro.</a></li>
-                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Ipsum dolorem</a></li>
-                      </ul>
-                    </div>
-                  </template>
-                </p-openable>
-              </li>
-              <li class="dropdown__item">
-                <p-openable class="mobileNavigation__button" name="submenu">
-                  <template #toggle>
-                    STUFF
-                    <svg class="icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
-                  </template>
-                  <template v-slot="{ click }">
-                    <div class="mobileNavigation__pane">
-                      <div class="mobileNavigation__title">
-                        <div class="mobileNavigation__actions">
-                          <button class="button -circle -ghost" @click.stopPropagation="click" tabindex="-1">
-                            <svg class="icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
-                          </button>
+                    </template>
+                  </p-openable>
+                </li>
+                <li class="dropdown__item">
+                  <p-openable class="mobileNavigation__button" name="submenu">
+                    <template #toggle>
+                      STUFF
+                      <svg class="icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
+                    </template>
+                    <template v-slot="{ click }">
+                      <div class="mobileNavigation__pane">
+                        <div class="mobileNavigation__title">
+                          <div class="mobileNavigation__actions">
+                            <button class="button -circle -ghost" @click.stopPropagation="click" tabindex="-1">
+                              <svg class="icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
+                            </button>
+                          </div>
+                          Menu
                         </div>
-                        Menu
+                        <ul class="mobileNavigation__list" v-directionals>
+                          <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
+                          <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
+                          <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Amet porro.</a></li>
+                          <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Ipsum dolorem</a></li>
+                        </ul>
                       </div>
-                      <ul class="mobileNavigation__list" v-directionals>
-                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
-                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
-                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Amet porro.</a></li>
-                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Ipsum dolorem</a></li>
-                      </ul>
-                    </div>
-                  </template>
-                </p-openable>
-              </li>
-              <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
-              <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Amet porro.</a></li>
-              <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Ipsum dolorem</a></li>
-              <li class="mobileNavigation__item">
-                <a class="mobileNavigation__link" href="">Amet impedit cumque</a>
-              </li>
-              <li class="mobileNavigation__item">
-                <a class="mobileNavigation__link" href="">Consectetur vitae temporibus!</a>
-              </li>
-              <li class="mobileNavigation__item">
-                <a class="mobileNavigation__link" href="">Consectetur doloremque reiciendis</a>
-              </li>
-              <li class="mobileNavigation__item">
-                <a class="mobileNavigation__link" href="">Dolor pariatur rerum.</a>
-              </li>
-              <li class="mobileNavigation__item">
-                <a class="mobileNavigation__link" href="">Ipsum a officiis.</a>
-              </li>
-              <li class="mobileNavigation__item">
-                <a class="mobileNavigation__link" href="">Dolor unde debitis.</a>
-              </li>
-              <li class="mobileNavigation__item">
-                <a class="mobileNavigation__link" href="">Adipisicing delectus velit</a>
-              </li>
-              <li class="mobileNavigation__item">
-                <a class="mobileNavigation__link" href="">Amet aliquam voluptates</a>
-              </li>
-            </ul>
-          </div>
-          <div class="mobileNavigation__closeButton">
-            <button class="button -circle -ghost" @click="click">
-              <svg class="icon"><use href="/main-icons-sprite.svg#close" /></svg>
-            </button>
-          </div>
-        </template>
-      </p-openable>
-    </nav>
+                    </template>
+                  </p-openable>
+                </li>
+                <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
+                <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Amet porro.</a></li>
+                <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Ipsum dolorem</a></li>
+                <li class="mobileNavigation__item">
+                  <a class="mobileNavigation__link" href="">Amet impedit cumque</a>
+                </li>
+                <li class="mobileNavigation__item">
+                  <a class="mobileNavigation__link" href="">Consectetur vitae temporibus!</a>
+                </li>
+                <li class="mobileNavigation__item">
+                  <a class="mobileNavigation__link" href="">Consectetur doloremque reiciendis</a>
+                </li>
+                <li class="mobileNavigation__item">
+                  <a class="mobileNavigation__link" href="">Dolor pariatur rerum.</a>
+                </li>
+                <li class="mobileNavigation__item">
+                  <a class="mobileNavigation__link" href="">Ipsum a officiis.</a>
+                </li>
+                <li class="mobileNavigation__item">
+                  <a class="mobileNavigation__link" href="">Dolor unde debitis.</a>
+                </li>
+                <li class="mobileNavigation__item">
+                  <a class="mobileNavigation__link" href="">Adipisicing delectus velit</a>
+                </li>
+                <li class="mobileNavigation__item">
+                  <a class="mobileNavigation__link" href="">Amet aliquam voluptates</a>
+                </li>
+              </ul>
+            </div>
+            <div class="mobileNavigation__closeButton">
+              <button class="button -circle -ghost" @click="click">
+                <svg class="icon"><use href="/main-icons-sprite.svg#close" /></svg>
+              </button>
+            </div>
+          </template>
+        </p-openable>
+      </nav>
 
-    <nav class="siteHeader__primaryNav navigation" v-directionals>
-      <ul class="navigation__list">
-        <li class="navigation__item" v-directionals>
-          <p-openable class="navigation__button" label="Default Dropdown" :close-on-blur="false">
-            <template #default>
-              <div class="navigation__dropdown dropdown">
-                <ul class="dropdown__list">
-                  <li class="dropdown__item"><a class="dropdown__link" href=""><span>Consectetur asperiores</span></a></li>
-                  <li class="dropdown__item"><a class="dropdown__link" href=""><span>Consectetur asperiores</span></a></li>
-                  <li class="dropdown__item"><a class="dropdown__link" href=""><span>Amet porro.</span></a></li>
-                  <li class="dropdown__item"><a class="dropdown__link" href=""><span>Ipsum dolorem</span></a></li>
-                </ul>
-              </div>
-            </template>
-          </p-openable>
-        </li>
-        <li class="navigation__item" v-directionals>
-          <p-openable class="navigation__button" label="Centered Dropdown" :close-on-blur="false">
-            <template #default>
-              <div class="navigation__dropdown dropdown -center">
-                <ul class="dropdown__list">
-                  <li class="dropdown__item"><a class="dropdown__link" href=""><span>Consectetur asperiores</span></a></li>
-                  <li class="dropdown__item"><a class="dropdown__link" href=""><span>Consectetur asperiores</span></a></li>
-                  <li class="dropdown__item"><a class="dropdown__link" href=""><span>Amet porro.</span></a></li>
-                  <li class="dropdown__item"><a class="dropdown__link" href=""><span>Ipsum dolorem</span></a></li>
-                </ul>
-              </div>
-            </template>
-          </p-openable>
-        </li>
-        <li class="navigation__item -wide" v-directionals>
-          <p-openable class="navigation__button" label="Full-width Dropdown" :close-on-blur="false">
-            <template #default>
-              <div class="navigation__dropdown dropdown grid -columns-3">
-                <div class="cell">
-                  <h3>Heading</h3>
-                  <p>
-                    Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-                  </p>
+      <nav class="siteHeader__primaryNav navigation" v-directionals>
+        <ul class="navigation__list">
+          <li class="navigation__item" v-directionals>
+            <p-openable class="navigation__button" label="Default Dropdown" :close-on-blur="false">
+              <template #default>
+                <div class="navigation__dropdown dropdown">
                   <ul class="dropdown__list">
-                    <li class="dropdown__item"><a class="dropdown__link" href=""><span>Consectetur asperiores</span></a></li>
-                    <li class="dropdown__item"><a class="dropdown__link" href=""><span>Consectetur asperiores</span></a></li>
-                    <li class="dropdown__item"><a class="dropdown__link" href=""><span>Amet porro.</span></a></li>
-                    <li class="dropdown__item"><a class="dropdown__link" href=""><span>Ipsum dolorem</span></a></li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Consectetur asperiores</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Consectetur asperiores</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Amet porro.</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Ipsum dolorem</span></a>
+                    </li>
                   </ul>
                 </div>
-                <div class="cell">
-                  <h3>Heading</h3>
-                  <p>
-                    Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-                  </p>
+              </template>
+            </p-openable>
+          </li>
+          <li class="navigation__item" v-directionals>
+            <p-openable class="navigation__button" label="Centered Dropdown" :close-on-blur="false">
+              <template #default>
+                <div class="navigation__dropdown dropdown -center">
                   <ul class="dropdown__list">
-                    <li class="dropdown__item"><a class="dropdown__link" href=""><span>Consectetur asperiores</span></a></li>
-                    <li class="dropdown__item"><a class="dropdown__link" href=""><span>Consectetur asperiores</span></a></li>
-                    <li class="dropdown__item"><a class="dropdown__link" href=""><span>Amet porro.</span></a></li>
-                    <li class="dropdown__item"><a class="dropdown__link" href=""><span>Ipsum dolorem</span></a></li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Consectetur asperiores</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Consectetur asperiores</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Amet porro.</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Ipsum dolorem</span></a>
+                    </li>
                   </ul>
                 </div>
-                <div class="cell">
-                  <h3>Heading</h3>
-                  <p>
-                    Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
-                  </p>
+              </template>
+            </p-openable>
+          </li>
+          <li class="navigation__item -wide" v-directionals>
+            <p-openable class="navigation__button" label="Full-width Dropdown" :close-on-blur="false">
+              <template #default>
+                <div class="navigation__dropdown dropdown grid -columns-3">
+                  <div class="cell">
+                    <h3>Heading</h3>
+                    <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
+                    <ul class="dropdown__list">
+                      <li class="dropdown__item">
+                        <a class="dropdown__link" href=""><span>Consectetur asperiores</span></a>
+                      </li>
+                      <li class="dropdown__item">
+                        <a class="dropdown__link" href=""><span>Consectetur asperiores</span></a>
+                      </li>
+                      <li class="dropdown__item">
+                        <a class="dropdown__link" href=""><span>Amet porro.</span></a>
+                      </li>
+                      <li class="dropdown__item">
+                        <a class="dropdown__link" href=""><span>Ipsum dolorem</span></a>
+                      </li>
+                    </ul>
+                  </div>
+                  <div class="cell">
+                    <h3>Heading</h3>
+                    <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
+                    <ul class="dropdown__list">
+                      <li class="dropdown__item">
+                        <a class="dropdown__link" href=""><span>Consectetur asperiores</span></a>
+                      </li>
+                      <li class="dropdown__item">
+                        <a class="dropdown__link" href=""><span>Consectetur asperiores</span></a>
+                      </li>
+                      <li class="dropdown__item">
+                        <a class="dropdown__link" href=""><span>Amet porro.</span></a>
+                      </li>
+                      <li class="dropdown__item">
+                        <a class="dropdown__link" href=""><span>Ipsum dolorem</span></a>
+                      </li>
+                    </ul>
+                  </div>
+                  <div class="cell">
+                    <h3>Heading</h3>
+                    <p>Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae</p>
+                    <ul class="dropdown__list">
+                      <li class="dropdown__item">
+                        <a class="dropdown__link" href=""><span>Consectetur asperiores</span></a>
+                      </li>
+                      <li class="dropdown__item">
+                        <a class="dropdown__link" href=""><span>Consectetur asperiores</span></a>
+                      </li>
+                      <li class="dropdown__item">
+                        <a class="dropdown__link" href=""><span>Amet porro.</span></a>
+                      </li>
+                      <li class="dropdown__item">
+                        <a class="dropdown__link" href=""><span>Ipsum dolorem</span></a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </template>
+            </p-openable>
+          </li>
+          <li class="navigation__item" v-directionals>
+            <p-openable class="navigation__button" label="Right Aligned Dropdown" :close-on-blur="false">
+              <template #default>
+                <div class="navigation__dropdown dropdown -rightAligned">
                   <ul class="dropdown__list">
-                    <li class="dropdown__item"><a class="dropdown__link" href=""><span>Consectetur asperiores</span></a></li>
-                    <li class="dropdown__item"><a class="dropdown__link" href=""><span>Consectetur asperiores</span></a></li>
-                    <li class="dropdown__item"><a class="dropdown__link" href=""><span>Amet porro.</span></a></li>
-                    <li class="dropdown__item"><a class="dropdown__link" href=""><span>Ipsum dolorem</span></a></li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Consectetur asperiores</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Consectetur asperiores</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Amet porro.</span></a>
+                    </li>
+                    <li class="dropdown__item">
+                      <a class="dropdown__link" href=""><span>Ipsum dolorem</span></a>
+                    </li>
                   </ul>
                 </div>
-              </div>
-            </template>
-          </p-openable>
-        </li>
-        <li class="navigation__item" v-directionals>
-          <p-openable class="navigation__button" label="Right Aligned Dropdown" :close-on-blur="false">
-            <template #default>
-              <div class="navigation__dropdown dropdown -rightAligned">
-                <ul class="dropdown__list">
-                  <li class="dropdown__item"><a class="dropdown__link" href=""><span>Consectetur asperiores</span></a></li>
-                  <li class="dropdown__item"><a class="dropdown__link" href=""><span>Consectetur asperiores</span></a></li>
-                  <li class="dropdown__item"><a class="dropdown__link" href=""><span>Amet porro.</span></a></li>
-                  <li class="dropdown__item"><a class="dropdown__link" href=""><span>Ipsum dolorem</span></a></li>
-                </ul>
-              </div>
-            </template>
-          </p-openable>
-        </li>
-      </ul>
-    </nav>
+              </template>
+            </p-openable>
+          </li>
+        </ul>
+      </nav>
     </div>
   </div>
 </header>
diff --git a/resources/styles/organisms/slider/index.scss b/resources/styles/organisms/slider/index.scss
index f32fe24..389d912 100644
--- a/resources/styles/organisms/slider/index.scss
+++ b/resources/styles/organisms/slider/index.scss
@@ -1,4 +1,4 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .slider {
   $b: &;
diff --git a/resources/styles/organisms/slider/slider.html b/resources/styles/organisms/slider/slider.html
index 6f357a1..395fc8c 100644
--- a/resources/styles/organisms/slider/slider.html
+++ b/resources/styles/organisms/slider/slider.html
@@ -17,12 +17,7 @@
       <swiper-slide loading="lazy" class="placeholder">Slide 2</swiper-slide>
       <swiper-slide loading="lazy" class="placeholder">Slide 3</swiper-slide>
       <swiper-slide loading="lazy" class="placeholder">Slide 4</swiper-slide>
-      <swiper-slide
-        loading="lazy"
-        class="placeholder"
-        style="aspect-ratio: 16 / 9"
-        >Wide</swiper-slide
-      >
+      <swiper-slide loading="lazy" class="placeholder" style="aspect-ratio: 16 / 9">Wide</swiper-slide>
       <swiper-slide loading="lazy" class="placeholder">Slide 6</swiper-slide>
     </p-slider>
   </div>
diff --git a/resources/styles/organisms/stats/index.scss b/resources/styles/organisms/stats/index.scss
index 4db3adf..351cdf8 100644
--- a/resources/styles/organisms/stats/index.scss
+++ b/resources/styles/organisms/stats/index.scss
@@ -1,4 +1,4 @@
-@use "@/core" as *;
+@use '@/core' as *;
 
 .stats {
   $b: &;
diff --git a/resources/styles/organisms/stats/stats.html b/resources/styles/organisms/stats/stats.html
index afee0c8..7703799 100644
--- a/resources/styles/organisms/stats/stats.html
+++ b/resources/styles/organisms/stats/stats.html
@@ -2,20 +2,17 @@
   <div class="container">
     <div class="stats__content">
       <div class="stats__stat">
-        <div class="stats__icon placeholder">
-        </div>
+        <div class="stats__icon placeholder"></div>
         <div class="stats__value">123,000</div>
         <div class="stats__description">Amet dolorum excepturi placeat assumenda molestiae Quidem accusantium alias quasi.</div>
       </div>
       <div class="stats__stat">
-        <div class="stats__icon placeholder">
-        </div>
+        <div class="stats__icon placeholder"></div>
         <div class="stats__value">200%</div>
         <div class="stats__description">Amet dolorum excepturi placeat assumenda molestiae Quidem accusantium alias quasi.</div>
       </div>
       <div class="stats__stat">
-        <div class="stats__icon placeholder">
-        </div>
+        <div class="stats__icon placeholder"></div>
         <div class="stats__value">7,000+</div>
         <div class="stats__description">Amet dolorum excepturi placeat assumenda molestiae Quidem accusantium alias quasi.</div>
       </div>
diff --git a/resources/styles/organisms/table/index.scss b/resources/styles/organisms/table/index.scss
index 0a297a3..95b69f7 100644
--- a/resources/styles/organisms/table/index.scss
+++ b/resources/styles/organisms/table/index.scss
@@ -16,7 +16,8 @@
     transition: background-color var(--root-ease-out-fast);
   }
 
-  td, th {
+  td,
+  th {
     padding: 1em 1.5em;
   }
 
@@ -91,13 +92,13 @@
  * They are closely related to --max-table-fade, that sets the fade size.
  */
 @property --table-fade {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: false;
   initial-value: 0;
 }
 
 @property --table-starting-fade {
-  syntax: "<length>";
+  syntax: '<length>';
   inherits: false;
   initial-value: 0;
 }
diff --git a/resources/styles/organisms/table/table--scrollable.html b/resources/styles/organisms/table/table--scrollable.html
index 250373b..cac51ce 100644
--- a/resources/styles/organisms/table/table--scrollable.html
+++ b/resources/styles/organisms/table/table--scrollable.html
@@ -1,5 +1,4 @@
 <div class="container">
-  
   <div class="table -scrollable -stickHead">
     <table>
       <thead>
@@ -184,7 +183,7 @@
       </tbody>
     </table>
   </div>
-  
+
   <div class="table -scrollable -stickHead -fadeBoth">
     <table>
       <thead>
@@ -369,7 +368,7 @@
       </tbody>
     </table>
   </div>
-  
+
   <div class="table -scrollable -stickHead -stickFirstColumn -fadeRight">
     <table>
       <thead>
@@ -554,5 +553,4 @@
       </tbody>
     </table>
   </div>
-  
 </div>
diff --git a/resources/styles/organisms/testimonialSlider/testimonialSlider.html b/resources/styles/organisms/testimonialSlider/testimonialSlider.html
index aff5152..f39232d 100644
--- a/resources/styles/organisms/testimonialSlider/testimonialSlider.html
+++ b/resources/styles/organisms/testimonialSlider/testimonialSlider.html
@@ -1,136 +1,106 @@
 <div class="slider container -withCallout">
   <svg class="slider__calloutIcon icon accent-primary" role="presentation">
-      <use href="/main-icons-sprite.svg#quote" />
+    <use href="/main-icons-sprite.svg#quote" />
   </svg>
   <div class="slider__callout">
-    <span class="h3">
-      Don’t take our word for it, read some of our thoughtful testimonials and decide for yourself.
-    </span>
+    <span class="h3"> Don’t take our word for it, read some of our thoughtful testimonials and decide for yourself. </span>
   </div>
   <div class="slider__content">
     <p-slider slides-per-view="auto" space-between="32" navigation="true" pagination-clickable="true" loop="true">
       <swiper-slide loading="lazy">
         <blockquote class="testimonial">
-          <p class="testimonial__content">
-          Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!
-          </p>
+          <p class="testimonial__content">Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!</p>
           <footer class="testimonial__footer">
             <div class="testimonial__citationPhotoWrapper">
-              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
+              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto" />
             </div>
             <cite class="testimonial__citation">
               Firstnamerson Lastname
-              <span class="testimonial__citationTitle">
-                Director of Important Titles, CorporateCorp
-              </span>
+              <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
             </cite>
           </footer>
         </blockquote>
       </swiper-slide>
       <swiper-slide loading="lazy">
         <blockquote class="testimonial">
-          <p class="testimonial__content">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil accusantium eligendi tempore placeat facere non enim expedita eum iusto delectus veniam inventore, a cumque vel? Illum ipsa in tempore minima?
-          </p>
+          <p class="testimonial__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil accusantium eligendi tempore placeat facere non enim expedita eum iusto delectus veniam inventore, a cumque vel? Illum ipsa in tempore minima?</p>
           <footer class="testimonial__footer">
             <div class="testimonial__citationPhotoWrapper">
-              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
+              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto" />
             </div>
             <cite class="testimonial__citation">
               Firstnamerson Lastname
-              <span class="testimonial__citationTitle">
-                Director of Important Titles, CorporateCorp
-              </span>
+              <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
             </cite>
           </footer>
         </blockquote>
       </swiper-slide>
       <swiper-slide loading="lazy">
         <blockquote class="testimonial">
-          <p class="testimonial__content">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia quo, maiores rerum ducimus et numquam maxime labore dolores laboriosam dolorum repudiandae consequuntur animi voluptas dignissimos reprehenderit modi non quibusdam amet.
-          </p>
+          <p class="testimonial__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia quo, maiores rerum ducimus et numquam maxime labore dolores laboriosam dolorum repudiandae consequuntur animi voluptas dignissimos reprehenderit modi non quibusdam amet.</p>
           <footer class="testimonial__footer">
             <div class="testimonial__citationPhotoWrapper">
-              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
+              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto" />
             </div>
             <cite class="testimonial__citation">
               Firstnamerson Lastname
-              <span class="testimonial__citationTitle">
-                Director of Important Titles, CorporateCorp
-              </span>
+              <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
             </cite>
           </footer>
         </blockquote>
       </swiper-slide>
       <swiper-slide loading="lazy">
         <blockquote class="testimonial">
-          <p class="testimonial__content">
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae animi molestias non itaque reiciendis facere est suscipit consequuntur eaque ipsum explicabo, corporis nulla enim earum fuga, distinctio voluptate possimus deserunt?
-          </p>
+          <p class="testimonial__content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae animi molestias non itaque reiciendis facere est suscipit consequuntur eaque ipsum explicabo, corporis nulla enim earum fuga, distinctio voluptate possimus deserunt?</p>
           <footer class="testimonial__footer">
             <div class="testimonial__citationPhotoWrapper">
-              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
+              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto" />
             </div>
             <cite class="testimonial__citation">
               Firstnamerson Lastname
-              <span class="testimonial__citationTitle">
-                Director of Important Titles, CorporateCorp
-              </span>
+              <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
             </cite>
           </footer>
         </blockquote>
       </swiper-slide>
       <swiper-slide loading="lazy">
         <blockquote class="testimonial">
-          <p class="testimonial__content">
-          Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!
-          </p>
+          <p class="testimonial__content">Suspendisse ac blandit nisi, non tempor purus. Pellentesque ornare tellus molestie quam pretium aliquet. Mauris eu est at velit cursus rutrum non sit amet turpis. Phasellus mauris est, fermentum sit amet tincidunt ultricies, egestas a ante proin et eros rutrum urna sollicitudin euismod non ut sem!</p>
           <footer class="testimonial__footer">
             <div class="testimonial__citationPhotoWrapper">
-              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
+              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto" />
             </div>
             <cite class="testimonial__citation">
               Firstnamerson Lastname
-              <span class="testimonial__citationTitle">
-                Director of Important Titles, CorporateCorp
-              </span>
+              <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
             </cite>
           </footer>
         </blockquote>
       </swiper-slide>
       <swiper-slide loading="lazy">
         <blockquote class="testimonial">
-          <p class="testimonial__content">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, exercitationem adipisci laboriosam nulla modi omnis excepturi vitae deleniti illum porro. Mollitia modi laudantium doloremque fugiat nostrum itaque quod quo error!
-          </p>
+          <p class="testimonial__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, exercitationem adipisci laboriosam nulla modi omnis excepturi vitae deleniti illum porro. Mollitia modi laudantium doloremque fugiat nostrum itaque quod quo error!</p>
           <footer class="testimonial__footer">
             <div class="testimonial__citationPhotoWrapper">
-              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
+              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto" />
             </div>
             <cite class="testimonial__citation">
               Firstnamerson Lastname
-              <span class="testimonial__citationTitle">
-                Director of Important Titles, CorporateCorp
-              </span>
+              <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
             </cite>
           </footer>
         </blockquote>
       </swiper-slide>
       <swiper-slide loading="lazy">
         <blockquote class="testimonial">
-          <p class="testimonial__content">
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit, obcaecati! Suscipit quidem ipsa qui sunt nihil aliquid. Alias veniam maxime, assumenda amet, totam, cupiditate sunt ab exercitationem voluptas incidunt harum.
-          </p>
+          <p class="testimonial__content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit, obcaecati! Suscipit quidem ipsa qui sunt nihil aliquid. Alias veniam maxime, assumenda amet, totam, cupiditate sunt ab exercitationem voluptas incidunt harum.</p>
           <footer class="testimonial__footer">
             <div class="testimonial__citationPhotoWrapper">
-              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto">
+              <img src="https://picsum.photos/400" alt="Placeholder photo" class="testimonial__citationPhoto" />
             </div>
             <cite class="testimonial__citation">
               Firstnamerson Lastname
-              <span class="testimonial__citationTitle">
-                Director of Important Titles, CorporateCorp
-              </span>
+              <span class="testimonial__citationTitle"> Director of Important Titles, CorporateCorp </span>
             </cite>
           </footer>
         </blockquote>
diff --git a/resources/styles/utilities/colors/colors.html b/resources/styles/utilities/colors/colors.html
index 407ed30..bd679a2 100644
--- a/resources/styles/utilities/colors/colors.html
+++ b/resources/styles/utilities/colors/colors.html
@@ -21,4 +21,3 @@ <h2>.accent-secondary</h2>
 
 <h2>.accent-tertiary</h2>
 <div class="accent-tertiary accent-color-scale"></div>
-
diff --git a/resources/styles/utilities/colors/index.scss b/resources/styles/utilities/colors/index.scss
index ff90e33..5dba165 100644
--- a/resources/styles/utilities/colors/index.scss
+++ b/resources/styles/utilities/colors/index.scss
@@ -18,24 +18,24 @@
 }
 
 .accent-white {
-  --accent-color-50: rgb(255 255 255 / .1);
-  --accent-color-100: rgb(255 255 255 / .2);
-  --accent-color-200: rgb(255 255 255 / .4);
-  --accent-color-300: rgb(255 255 255 / .6);
-  --accent-color-400: rgb(255 255 255 / .8);
+  --accent-color-50: rgb(255 255 255 / 0.1);
+  --accent-color-100: rgb(255 255 255 / 0.2);
+  --accent-color-200: rgb(255 255 255 / 0.4);
+  --accent-color-300: rgb(255 255 255 / 0.6);
+  --accent-color-400: rgb(255 255 255 / 0.8);
   --accent-color: #fff;
-  --accent-color-600: rgb(255 255 255 / .8);
-  --accent-color-700: rgb(255 255 255 / .6);
+  --accent-color-600: rgb(255 255 255 / 0.8);
+  --accent-color-700: rgb(255 255 255 / 0.6);
   --accent-color-text: var(--color-purple);
 }
 
 .accent-black {
   --accent-color: #000;
-  --accent-color-600: rgb(0 0 0 / .8);
-  --accent-color-700: rgb(0 0 0 / .6);
-  --accent-color-800: rgb(0 0 0 / .4);
-  --accent-color-900: rgb(0 0 0 / .2);
-  --accent-color-950: rgb(0 0 0 / .1);
+  --accent-color-600: rgb(0 0 0 / 0.8);
+  --accent-color-700: rgb(0 0 0 / 0.6);
+  --accent-color-800: rgb(0 0 0 / 0.4);
+  --accent-color-900: rgb(0 0 0 / 0.2);
+  --accent-color-950: rgb(0 0 0 / 0.1);
 }
 
 .error {
diff --git a/resources/styles/utilities/index.scss b/resources/styles/utilities/index.scss
index 5ca4e6d..0eb6224 100644
--- a/resources/styles/utilities/index.scss
+++ b/resources/styles/utilities/index.scss
@@ -1 +1 @@
-@forward './colors';
\ No newline at end of file
+@forward './colors';

From c636d971bd18b6ba44b9e3f3f6fb9b4bddbea2ef Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Wed, 4 Feb 2026 17:07:01 -0500
Subject: [PATCH 02/11] stylelint

---
 package.json                                  |  6 +++++
 resources/styles/atoms/breadcrumbs/index.scss |  2 ++
 resources/styles/atoms/button/index.scss      | 10 +++++----
 resources/styles/atoms/checkbox/index.scss    |  2 ++
 resources/styles/atoms/dropdown/index.scss    |  6 ++---
 resources/styles/atoms/heading/index.scss     |  1 +
 resources/styles/atoms/icon/index.scss        |  6 ++++-
 resources/styles/atoms/index.scss             |  1 -
 resources/styles/atoms/input/index.scss       |  1 +
 resources/styles/atoms/link/index.scss        |  2 +-
 resources/styles/atoms/media/index.scss       | 19 ++++++++--------
 resources/styles/atoms/select/index.scss      |  3 +--
 resources/styles/atoms/switch/index.scss      |  9 ++++----
 resources/styles/atoms/tag/index.scss         | 12 +++++-----
 resources/styles/config/index.scss            | 12 ++++------
 resources/styles/core/accentColors.scss       | 22 +++++++++----------
 resources/styles/core/base.scss               |  2 +-
 resources/styles/core/dev.scss                |  7 ++++--
 resources/styles/core/functions/fluid.scss    | 12 +++++-----
 resources/styles/core/mixins/breakpoints.scss |  9 ++++----
 resources/styles/core/properties.scss         | 16 +++++++-------
 .../core/utilities/container/index.scss       |  4 ++--
 .../styles/core/utilities/grid/cell.scss      | 10 ++++-----
 .../styles/core/utilities/srOnly/index.scss   |  1 -
 .../styles/molecules/accordion/index.scss     |  7 +++---
 resources/styles/molecules/banner/index.scss  |  2 +-
 resources/styles/molecules/card/index.scss    |  4 ++--
 .../styles/molecules/featureVideo/index.scss  |  2 +-
 resources/styles/molecules/list/index.scss    |  1 +
 .../styles/molecules/logoGrid/index.scss      |  6 ++---
 .../molecules/mobileNavigation/index.scss     |  4 ++--
 .../styles/molecules/navigation/index.scss    |  4 ++--
 .../styles/molecules/pagination/index.scss    |  3 ++-
 resources/styles/molecules/tabs/index.scss    | 16 ++++++++------
 .../styles/molecules/testimonial/index.scss   |  1 +
 .../styles/organisms/basicSection/index.scss  |  4 ++++
 resources/styles/organisms/hero/index.scss    | 19 ++++++++++------
 .../styles/organisms/mediaBanner/index.scss   |  9 ++++----
 resources/styles/organisms/message/index.scss | 14 +++++++-----
 resources/styles/organisms/section/index.scss |  2 +-
 .../styles/organisms/siteFooter/index.scss    |  1 +
 .../styles/organisms/siteHeader/index.scss    |  1 +
 resources/styles/organisms/slider/index.scss  |  6 ++---
 resources/styles/organisms/stats/index.scss   |  3 ++-
 resources/styles/organisms/table/index.scss   |  7 ++++--
 resources/styles/utilities/colors/index.scss  | 14 ++++++------
 stylelint.config.mjs                          | 13 +++++++++++
 47 files changed, 185 insertions(+), 133 deletions(-)
 create mode 100644 stylelint.config.mjs

diff --git a/package.json b/package.json
index 03ac182..c8889da 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,13 @@
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "*",
+        "postcss-scss": "^4.0.9",
+        "prettier": "^3.8.1",
         "sass": "^1.83.4",
+        "stylelint": "^17.1.1",
+        "stylelint-config-standard": "^40.0.0",
+        "stylelint-config-standard-scss": "^17.0.0",
+        "stylelint-scss": "^7.0.0",
         "vite": "^6.0.7 || ^7.0.0"
     },
     "browserslist": [
diff --git a/resources/styles/atoms/breadcrumbs/index.scss b/resources/styles/atoms/breadcrumbs/index.scss
index 0a833db..90b9669 100644
--- a/resources/styles/atoms/breadcrumbs/index.scss
+++ b/resources/styles/atoms/breadcrumbs/index.scss
@@ -1,5 +1,6 @@
 .breadcrumbs {
   $b: &;
+
   --accent-color: var(--link-color, var(--color-blue));
 
   font-size: 0.75rem;
@@ -23,6 +24,7 @@
 
   &__link {
     --accent-color: inherit;
+
     align-items: normal;
     gap: 0.5rem;
   }
diff --git a/resources/styles/atoms/button/index.scss b/resources/styles/atoms/button/index.scss
index c6f1b0b..3e3ff26 100644
--- a/resources/styles/atoms/button/index.scss
+++ b/resources/styles/atoms/button/index.scss
@@ -30,7 +30,7 @@
 
   &:hover,
   &:active {
-    color: #fff;
+    color: #ffffff;
     background-color: var(--accent-color-700);
     border-color: var(--accent-color-700);
   }
@@ -40,12 +40,13 @@
   &.-disabled {
     --accent-color: var(--root-background-color-inactive);
     --accent-color-text: white;
+
     cursor: initial;
     pointer-events: none;
   }
 
   &.-outline {
-    background: #0000;
+    background: #00000000;
     color: var(--accent-color);
 
     &:hover {
@@ -55,6 +56,7 @@
 
   &.-outline-fill {
     @extend .-outline;
+
     &:hover {
       background-color: var(--accent-color);
       border-color: var(--accent-color);
@@ -63,8 +65,8 @@
   }
 
   &.-ghost {
-    background: #0000;
-    border-color: #0000;
+    background: #00000000;
+    border-color: #00000000;
     color: var(--accent-color);
 
     &:hover {
diff --git a/resources/styles/atoms/checkbox/index.scss b/resources/styles/atoms/checkbox/index.scss
index 0b0b72b..6a9076c 100644
--- a/resources/styles/atoms/checkbox/index.scss
+++ b/resources/styles/atoms/checkbox/index.scss
@@ -14,6 +14,7 @@
   &::before {
     content: '';
     background: var(--accent-color-contrast);
+
     /* Using mask as this is the only way to make the color of the checkmark dynamic */
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 8L9.75 16.25L6 12.5' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
     display: none;
@@ -53,6 +54,7 @@
   &:disabled {
     background: var(--color-gray-50);
     border-color: var(--color-gray-200);
+
     // cursor: not-allowed;
 
     &::before {
diff --git a/resources/styles/atoms/dropdown/index.scss b/resources/styles/atoms/dropdown/index.scss
index 126b291..1818222 100644
--- a/resources/styles/atoms/dropdown/index.scss
+++ b/resources/styles/atoms/dropdown/index.scss
@@ -1,14 +1,13 @@
 @use '@/core' as *;
 
 .dropdown {
-  background: #fff;
+  background: #ffffff;
   box-shadow: var(--root-box-shadow-med);
   padding: 1.5rem;
   position: absolute;
   width: max-content;
   max-width: 320px;
   z-index: 1;
-
   transition: opacity var(--root-ease-out-moderate);
 
   @starting-style {
@@ -17,7 +16,7 @@
 
   &__link,
   &__button {
-    background: #0000;
+    background: #00000000;
     border: 0;
     color: var(--accent-color);
     display: block;
@@ -50,6 +49,7 @@
     left: 50%;
     translate: -50%;
   }
+
   &.-rightAligned {
     right: 0;
   }
diff --git a/resources/styles/atoms/heading/index.scss b/resources/styles/atoms/heading/index.scss
index db2d051..1f9a191 100644
--- a/resources/styles/atoms/heading/index.scss
+++ b/resources/styles/atoms/heading/index.scss
@@ -2,6 +2,7 @@
 
 :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
   --accent-color: var(--heading-color, var(--root-color-headings));
+
   color: var(--accent-color);
   font-family: var(--root-font-family-heading);
   font-weight: 700;
diff --git a/resources/styles/atoms/icon/index.scss b/resources/styles/atoms/icon/index.scss
index 81b9a33..90c63a3 100644
--- a/resources/styles/atoms/icon/index.scss
+++ b/resources/styles/atoms/icon/index.scss
@@ -1,12 +1,15 @@
 .icon {
   --icon-color: var(--accent-color);
+
   aspect-ratio: 1;
   height: 1.5em;
 
   &.-square,
   &.-circle {
     background: var(--accent-color);
+
     --icon-color: var(--icon-stroke-color);
+
     display: inline grid;
     padding: 0.3125em;
   }
@@ -17,11 +20,12 @@
 
   &.-circle {
     /* Using mask-image to avoid clipping the icons. */
-    mask: radial-gradient(closest-side, #fff calc(100% - 1px), #0000);
+    mask: radial-gradient(closest-side, #ffffff calc(100% - 1px), #00000000);
   }
 
   &.-light {
     --icon-color: var(--accent-color-700);
+
     background: var(--accent-color-300);
   }
 }
diff --git a/resources/styles/atoms/index.scss b/resources/styles/atoms/index.scss
index eca7595..50f6d0e 100644
--- a/resources/styles/atoms/index.scss
+++ b/resources/styles/atoms/index.scss
@@ -4,7 +4,6 @@
  * first makes it easier to override the base icon styles.
  */
 @forward 'icon';
-
 @forward 'breadcrumbs';
 @forward 'button';
 @forward 'checkbox';
diff --git a/resources/styles/atoms/input/index.scss b/resources/styles/atoms/input/index.scss
index f17019e..2a0bc6c 100644
--- a/resources/styles/atoms/input/index.scss
+++ b/resources/styles/atoms/input/index.scss
@@ -11,6 +11,7 @@
 
   &:focus {
     --accent-color: inherit;
+
     outline: none;
   }
 
diff --git a/resources/styles/atoms/link/index.scss b/resources/styles/atoms/link/index.scss
index 8ef4d9e..a6f4c95 100644
--- a/resources/styles/atoms/link/index.scss
+++ b/resources/styles/atoms/link/index.scss
@@ -11,7 +11,7 @@ a,
 
   &:where(button) {
     appearance: none;
-    background: #0000;
+    background: #00000000;
     border: 0;
   }
 
diff --git a/resources/styles/atoms/media/index.scss b/resources/styles/atoms/media/index.scss
index 95f7c14..9998b8a 100644
--- a/resources/styles/atoms/media/index.scss
+++ b/resources/styles/atoms/media/index.scss
@@ -1,7 +1,7 @@
 .media {
   $b: &;
 
-  background-color: rgb(from currentColor r g b / 0.25);
+  background-color: rgb(from currentcolor r g b / 0.25);
   display: inline grid;
   margin-bottom: 2rem;
   width: 267px;
@@ -9,7 +9,7 @@
   aspect-ratio: 267 / 150;
   overflow: hidden;
 
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     width: 300px;
     aspect-ratio: 300 / 150;
   }
@@ -20,7 +20,7 @@
   }
 
   /* Ensure wrapper divs from components fill the grid cell */
-  > div:not(.media__mask):not(.media__trigger) {
+  > div:not(.media__mask, .media__trigger) {
     width: 100%;
     height: 100%;
     min-width: 0;
@@ -68,12 +68,11 @@
 
   &__trigger {
     appearance: none;
-    background: #0000;
+    background: #00000000;
     border: 0;
     border-radius: max(50cqmin, 6rem);
     padding: 0;
-    align-self: center;
-    justify-self: center;
+    place-self: center center;
     color: var(--accent-color-200);
     container-type: size;
     position: relative;
@@ -88,9 +87,8 @@
     }
 
     &.-loaded {
-      align-self: start;
+      place-self: start end;
       height: min(25cqmin, 3rem);
-      justify-self: end;
       margin: 0.5rem;
       opacity: 0;
       pointer-events: none;
@@ -111,6 +109,7 @@
 
   &__icon {
     --icon-stroke-color: var(--accent-color-200);
+
     filter: drop-shadow(var(--root-box-shadow-med));
     width: auto;
     height: auto;
@@ -128,7 +127,7 @@
   /**
    * hacks to target and better style iframes from youtube/vimeo embeds from CKEditor.
    */
-  &:has(> iframe):not(:has(p-wistia)):not(:has(p-lazy)):not(:has(p-you-tube-playlist)) {
+  &:has(> iframe):not(:has(p-wistia), :has(p-lazy), :has(p-you-tube-playlist)) {
     display: grid;
 
     /* these divs are using a padding-bottom hack for the aspect ratio. */
@@ -170,7 +169,7 @@
     height: 150px;
     width: 267px;
 
-    @media (min-width: 768px) {
+    @media (width >= 768px) {
       width: 300px;
     }
 
diff --git a/resources/styles/atoms/select/index.scss b/resources/styles/atoms/select/index.scss
index 41623fa..d289a06 100644
--- a/resources/styles/atoms/select/index.scss
+++ b/resources/styles/atoms/select/index.scss
@@ -15,9 +15,8 @@ select {
 .select {
   $b: &;
 
-  align-items: center;
+  place-items: center end;
   display: inline grid;
-  justify-items: end;
   margin-bottom: 1em;
 
   &::after {
diff --git a/resources/styles/atoms/switch/index.scss b/resources/styles/atoms/switch/index.scss
index ed8ee2b..6a98b33 100644
--- a/resources/styles/atoms/switch/index.scss
+++ b/resources/styles/atoms/switch/index.scss
@@ -1,6 +1,6 @@
 .switch {
   border-radius: 2em;
-  box-shadow: 0px 2px 4px 0px var(--color-gray-500) inset;
+  box-shadow: 0 2px 4px 0 var(--color-gray-500) inset;
   display: inline grid;
   height: 2em;
   padding: 3px;
@@ -24,18 +24,19 @@
 
   &.-checked,
   &:checked {
-    box-shadow: 0px 2px 4px 0px var(--accent-color-700) inset;
+    box-shadow: 0 2px 4px 0 var(--accent-color-700) inset;
 
     &::before {
       background: var(--accent-color-contrast);
       translate: 2em;
-      box-shadow: 0px 2px 2px 0px var(--accent-color-700);
+      box-shadow: 0 2px 2px 0 var(--accent-color-700);
     }
   }
 
   &.-disabled,
   &:disabled {
-    box-shadow: 0px 2px 4px 0px var(--color-gray-200) inset;
+    box-shadow: 0 2px 4px 0 var(--color-gray-200) inset;
+
     &::before {
       background: var(--color-gray-200);
     }
diff --git a/resources/styles/atoms/tag/index.scss b/resources/styles/atoms/tag/index.scss
index 165997b..33cb214 100644
--- a/resources/styles/atoms/tag/index.scss
+++ b/resources/styles/atoms/tag/index.scss
@@ -63,10 +63,10 @@
   &:where(button) {
     background-color: var(--accent-color);
     border-color: var(--accent-color);
-    color: #fff;
+    color: #ffffff;
     box-shadow: var(--root-box-shadow-low);
     #{$b}__icon {
-      color: #fff;
+      color: #ffffff;
     }
 
     &:hover {
@@ -85,10 +85,10 @@
   &:has(input:checked) {
     background-color: var(--accent-color-700);
     border-color: var(--accent-color-700);
-    color: #fff;
+    color: #ffffff;
 
     #{$b}__icon {
-      color: #fff;
+      color: #ffffff;
     }
   }
 
@@ -96,9 +96,9 @@
   &.-dismissable:has(input:checked) {
     background-color: var(--accent-color-700);
     border-color: var(--accent-color-700);
-    color: #fff;
+    color: #ffffff;
     #{$b}__icon {
-      color: #fff;
+      color: #ffffff;
       padding: 0.1667em;
 
       > use:nth-child(1) {
diff --git a/resources/styles/config/index.scss b/resources/styles/config/index.scss
index c491c85..9c1d2a9 100644
--- a/resources/styles/config/index.scss
+++ b/resources/styles/config/index.scss
@@ -3,7 +3,7 @@
 /**
  * @imports
  */
-@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Inter:wght@100..900&display=swap');
+@import 'https://fonts.googleapis.com/css2?family=Gloock&family=Inter:wght@100..900&display=swap';
 
 :root {
   /**
@@ -12,13 +12,11 @@
 
   --root-font-family: initial;
   --root-font-family-heading: initial;
-
   --root-font-size-h1: #{fluid-rems(2, 2.5, 3)};
   --root-font-size-h2: #{fluid-rems(1.5, 2, 2.5)};
   --root-font-size-h3: #{fluid-rems(1.25, 1.5, 2)};
   --root-font-size-h4: #{fluid-rems(1.125, 1.25, 1.5)};
   --root-font-size-h5: #{fluid-rems(1, 1.125, 1.25)};
-
   --root-font-size-sm: 0.75rem;
   --root-font-size-lg: 1.5rem;
 
@@ -137,7 +135,7 @@
    * Breakpoints
    */
 
-  @include setBreakpoints(
+  @include set-breakpoints(
     (
       sm: 320px,
       md: 744px,
@@ -148,12 +146,12 @@
   --root-gap: 16px;
 
   /* should be max mobile width + tablet outer gutters */
-  @media (min-width: 368px) {
+  @media (width >= 368px) {
     --root-gap: 24px;
   }
 
   /* should be max tablet width + desktop outer gutters */
-  @media (min-width: 808px) {
+  @media (width >= 808px) {
     --root-gap: 32px;
   }
 
@@ -166,7 +164,5 @@
     --root-duration-slow: 0;
   }
 
-  //
   // Configure other --root- properties here.
-  //
 }
diff --git a/resources/styles/core/accentColors.scss b/resources/styles/core/accentColors.scss
index 9516b28..91504e6 100644
--- a/resources/styles/core/accentColors.scss
+++ b/resources/styles/core/accentColors.scss
@@ -2,17 +2,17 @@
   /**
    * A scale of accent colors, using color-mix, from 90% white to 90% black.
    */
-  --accent-color-50: color-mix(in srgb, var(--accent-color), #fff 90%);
-  --accent-color-100: color-mix(in srgb, var(--accent-color), #fff 80%);
-  --accent-color-200: color-mix(in srgb, var(--accent-color), #fff 60%);
-  --accent-color-300: color-mix(in srgb, var(--accent-color), #fff 40%);
-  --accent-color-400: color-mix(in srgb, var(--accent-color), #fff 20%);
+  --accent-color-50: color-mix(in srgb, var(--accent-color), #ffffff 90%);
+  --accent-color-100: color-mix(in srgb, var(--accent-color), #ffffff 80%);
+  --accent-color-200: color-mix(in srgb, var(--accent-color), #ffffff 60%);
+  --accent-color-300: color-mix(in srgb, var(--accent-color), #ffffff 40%);
+  --accent-color-400: color-mix(in srgb, var(--accent-color), #ffffff 20%);
   --accent-color-500: var(--accent-color);
-  --accent-color-600: color-mix(in srgb, var(--accent-color), #000 20%);
-  --accent-color-700: color-mix(in srgb, var(--accent-color), #000 40%);
-  --accent-color-800: color-mix(in srgb, var(--accent-color), #000 60%);
-  --accent-color-900: color-mix(in srgb, var(--accent-color), #000 80%);
-  --accent-color-950: color-mix(in srgb, var(--accent-color), #000 90%);
+  --accent-color-600: color-mix(in srgb, var(--accent-color), #000000 20%);
+  --accent-color-700: color-mix(in srgb, var(--accent-color), #000000 40%);
+  --accent-color-800: color-mix(in srgb, var(--accent-color), #000000 60%);
+  --accent-color-900: color-mix(in srgb, var(--accent-color), #000000 80%);
+  --accent-color-950: color-mix(in srgb, var(--accent-color), #000000 90%);
 
   /**
    * This variable is either black or white - whichever has the highest contrast
@@ -20,7 +20,7 @@
    * different way to check contrast to the WCAG 2.1 contrast ratio. turns out
    * that 58% is a closer cut off to WCAG than 50%.
    */
-  --accent-color-contrast: lab(from var(--accent-color) round(108 - L, 100) 0 0);
+  --accent-color-contrast: lab(from var(--accent-color) round(108 - l, 100) 0 0);
 
   /**
    * This variable based on AccentColorText is either var(--accent-color-dark)
diff --git a/resources/styles/core/base.scss b/resources/styles/core/base.scss
index cafb8b6..0545e64 100644
--- a/resources/styles/core/base.scss
+++ b/resources/styles/core/base.scss
@@ -16,7 +16,7 @@ html {
   font-size: var(--root-font-size);
   line-height: var(--root-line-height);
   interpolate-size: allow-keywords;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 /**
diff --git a/resources/styles/core/dev.scss b/resources/styles/core/dev.scss
index be2fff0..f28e6d2 100644
--- a/resources/styles/core/dev.scss
+++ b/resources/styles/core/dev.scss
@@ -1,5 +1,6 @@
 .accent-color-scale {
   --size: 1.5em;
+
   font-size: 1.5em;
   background:
     linear-gradient(var(--accent-color-50) 100%, tan) 0 / 10%,
@@ -21,11 +22,13 @@
 
 .placeholder {
   aspect-ratio: 1;
+
   --placeholder-color: rgb(from var(--accent-color) r g b / 0.2);
+
   border: 2px solid var(--placeholder-color);
   background:
-    linear-gradient(to top right, #0000 calc(50% - 2px), var(--placeholder-color), #0000 calc(50% + 2px)),
-    linear-gradient(to top left, #0000 calc(50% - 2px), var(--placeholder-color), #0000 calc(50% + 2px)) rgb(from var(--accent-color) r g b / 0.1);
+    linear-gradient(to top right, #00000000 calc(50% - 2px), var(--placeholder-color), #00000000 calc(50% + 2px)),
+    linear-gradient(to top left, #00000000 calc(50% - 2px), var(--placeholder-color), #00000000 calc(50% + 2px)) rgb(from var(--accent-color) r g b / 0.1);
   align-content: center;
   text-align: center;
   color: var(--accent-color);
diff --git a/resources/styles/core/functions/fluid.scss b/resources/styles/core/functions/fluid.scss
index a29d014..3ccbdb5 100644
--- a/resources/styles/core/functions/fluid.scss
+++ b/resources/styles/core/functions/fluid.scss
@@ -22,10 +22,10 @@
  *
  */
 @function fluid-rems($size-sm, $size-md, $size-lg: null) {
-  @if ($size-lg == null) {
-    @return calc(#{$size-sm * 1rem} + var(--fluid-rem-sm-lg) * #{$size-md - $size-sm});
-  } @else {
+  @if $size-lg {
     @return calc(#{$size-sm * 1rem} + var(--fluid-rem-sm-md) * #{$size-md - $size-sm} + var(--fluid-rem-md-lg) * #{$size-lg - $size-md});
+  } @else {
+    @return calc(#{$size-sm * 1rem} + var(--fluid-rem-sm-lg) * #{$size-md - $size-sm});
   }
 }
 
@@ -51,10 +51,10 @@
  *
  */
 @function fluid-pxs($size-sm, $size-md, $size-lg: null) {
-  @if $size-lg == null {
-    @return calc(#{$size-sm * 1px} + var(--fluid-sm-lg) * #{$size-md - $size-sm});
-  } @else {
+  @if $size-lg {
     @return calc(#{$size-sm * 1px} + var(--fluid-sm-md) * #{$size-md - $size-sm} + var(--fluid-md-lg) * #{$size-lg - $size-md});
+  } @else {
+    @return calc(#{$size-sm * 1px} + var(--fluid-sm-lg) * #{$size-md - $size-sm});
   }
 }
 
diff --git a/resources/styles/core/mixins/breakpoints.scss b/resources/styles/core/mixins/breakpoints.scss
index ffcba6a..6427b4a 100644
--- a/resources/styles/core/mixins/breakpoints.scss
+++ b/resources/styles/core/mixins/breakpoints.scss
@@ -3,7 +3,7 @@
 @use 'sass:meta';
 
 /**
- * Default breakpoints. Make sure to set setBreakpoints when changing these.
+ * Default breakpoints. Make sure to set set-breakpoints when changing these.
  */
 $breakpoints: (
   sm: 320px,
@@ -20,15 +20,15 @@ $breakpoints: (
  *                      $breakpoints value.
  * Usage:
  *
- *     @include setBreakpoints(( sm: 320px, md: 744px));
+ *     @include set-breakpoints(( sm: 320px, md: 744px));
  *
  * or
  *
  *     $breakpoints: ( sm: 320px, md: 744px ); 
- *     @include setBreakpoints;
+ *     @include set-breakpoints;
  *
  */
-@mixin setBreakpoints($breakpoints: $breakpoints) {
+@mixin set-breakpoints($breakpoints: $breakpoints) {
   $breakpoints: $breakpoints !global;
 
   @each $breakpoint, $value in $breakpoints {
@@ -54,6 +54,7 @@ $breakpoints: (
   @if map.has-key($breakpoints, $breakpoint) {
     $breakpoint: map.get($breakpoints, $breakpoint);
   }
+
   @media screen and (#{$property}: #{$breakpoint}) {
     @content;
   }
diff --git a/resources/styles/core/properties.scss b/resources/styles/core/properties.scss
index 945e89f..989a5bc 100644
--- a/resources/styles/core/properties.scss
+++ b/resources/styles/core/properties.scss
@@ -10,7 +10,7 @@
 @property --root-font-family-heading {
   syntax: '*';
   inherits: true;
-  initial-value: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+  initial-value: inter, roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', arial, sans-serif;
 }
 
 @property --root-font-size {
@@ -118,13 +118,13 @@
 @property --root-icon-fill-color {
   syntax: '<color>';
   inherits: true;
-  initial-value: currentColor;
+  initial-value: currentcolor;
 }
 
 @property --root-icon-stroke-color {
   syntax: '<color>';
   inherits: true;
-  initial-value: #fff;
+  initial-value: #ffffff;
 }
 
 @property --root-icon-stroke-width {
@@ -136,13 +136,13 @@
 @property --icon-fill-color {
   syntax: '<color>';
   inherits: true;
-  initial-value: currentColor;
+  initial-value: currentcolor;
 }
 
 @property --icon-stroke-color {
   syntax: '<color>';
   inherits: true;
-  initial-value: currentColor;
+  initial-value: currentcolor;
 }
 
 @property --icon-stroke-width {
@@ -211,19 +211,19 @@
 @property --root-box-shadow-low {
   syntax: '*';
   inherits: true;
-  initial-value: 0px 16px 64px rgba(0, 0, 0, 0.05);
+  initial-value: 0 16px 64px rgb(0 0 0 / 0.05);
 }
 
 @property --root-box-shadow-med {
   syntax: '*';
   inherits: true;
-  initial-value: 0px 16px 32px rgba(0, 0, 0, 0.1);
+  initial-value: 0 16px 32px rgb(0 0 0 / 0.1);
 }
 
 @property --root-box-shadow-high {
   syntax: '*';
   inherits: true;
-  initial-value: 0px 16px 64px rgba(0, 0, 0, 0.05);
+  initial-value: 0 16px 64px rgb(0 0 0 / 0.05);
 }
 
 /**
diff --git a/resources/styles/core/utilities/container/index.scss b/resources/styles/core/utilities/container/index.scss
index e4bf126..c2016e7 100644
--- a/resources/styles/core/utilities/container/index.scss
+++ b/resources/styles/core/utilities/container/index.scss
@@ -26,12 +26,12 @@
   }
 
   /* should be max mobile columns + tablet outer gutters */
-  @media (min-width: 368px) {
+  @media (width >= 368px) {
     --container-width: 744px;
   }
 
   /* should be max tablet columns + desktop outer gutters */
-  @media (min-width: 808px) {
+  @media (width >= 808px) {
     --container-width: 1300px;
   }
 }
diff --git a/resources/styles/core/utilities/grid/cell.scss b/resources/styles/core/utilities/grid/cell.scss
index 309014c..afc0cfc 100644
--- a/resources/styles/core/utilities/grid/cell.scss
+++ b/resources/styles/core/utilities/grid/cell.scss
@@ -1,5 +1,6 @@
 .cell {
   --cell-span: clamp(1, round(var(--span, 1) * 3), var(--columns));
+
   grid-column: span var(--cell-span);
 
   &.-left {
@@ -11,8 +12,7 @@
   }
 
   &.-center {
-    grid-column-start: round(down, 1 + (var(--columns, 1) - var(--cell-span)) / 2, 1);
-    grid-column-end: span calc(var(--cell-span) + mod(var(--columns) - var(--cell-span), 2));
+    grid-column: round(down, 1 + (var(--columns, 1) - var(--cell-span)) / 2, 1) / span calc(var(--cell-span) + mod(var(--columns) - var(--cell-span), 2));
 
     :where(.container) > & {
       grid-column-start: round(down, 2 + (var(--columns, 1) - var(--cell-span)) / 2, 1);
@@ -22,7 +22,7 @@
   &.-prioritize {
     order: -1;
 
-    @media (min-width: 808px) {
+    @media (width >= 808px) {
       order: unset;
     }
   }
@@ -33,11 +33,11 @@
     }
   }
 
-  @media (min-width: 368px) {
+  @media (width >= 368px) {
     --cell-span: clamp(1, round(var(--span, 1) * 1.5), var(--columns));
   }
 
-  @media (min-width: 808px) {
+  @media (width >= 808px) {
     --cell-span: var(--span, 1);
   }
 }
diff --git a/resources/styles/core/utilities/srOnly/index.scss b/resources/styles/core/utilities/srOnly/index.scss
index 42d3235..7f44f85 100644
--- a/resources/styles/core/utilities/srOnly/index.scss
+++ b/resources/styles/core/utilities/srOnly/index.scss
@@ -1,6 +1,5 @@
 .srOnly {
   border-width: 0;
-  clip: rect(0, 0, 0, 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
diff --git a/resources/styles/molecules/accordion/index.scss b/resources/styles/molecules/accordion/index.scss
index eb5ddad..6597297 100644
--- a/resources/styles/molecules/accordion/index.scss
+++ b/resources/styles/molecules/accordion/index.scss
@@ -31,12 +31,11 @@
   &__summary {
     --heading-color: var(--root-color-headings);
 
-    align-items: center;
+    place-items: center start;
     border-radius: 0.5rem;
     cursor: pointer;
     display: grid;
     grid-auto-flow: column;
-    justify-items: start;
     list-style: none;
     outline-offset: -2px;
     padding: 0.5rem;
@@ -61,6 +60,7 @@
 
   &__icon {
     --icon-color: var(--accent-color-contrast);
+
     aspect-ratio: 1;
     height: var(--root-font-size-h3);
     transition: transform var(--root-duration-moderate) var(--root-ease-out);
@@ -78,7 +78,8 @@
     }
 
     #{$b}__icon {
-      --icon-color: #000;
+      --icon-color: #000000;
+
       transform: rotate(90deg);
     }
   }
diff --git a/resources/styles/molecules/banner/index.scss b/resources/styles/molecules/banner/index.scss
index 7ef655c..22c5985 100644
--- a/resources/styles/molecules/banner/index.scss
+++ b/resources/styles/molecules/banner/index.scss
@@ -33,7 +33,7 @@
   }
 
   &__close {
-    background: #0000;
+    background: #00000000;
     border: 0;
     color: var(--accent-color-contrast);
     grid-area: 1 / 2;
diff --git a/resources/styles/molecules/card/index.scss b/resources/styles/molecules/card/index.scss
index e652144..f155b95 100644
--- a/resources/styles/molecules/card/index.scss
+++ b/resources/styles/molecules/card/index.scss
@@ -3,9 +3,9 @@
 .card {
   $b: &;
 
-  background-color: #fff;
+  background-color: #ffffff;
   border-radius: 1rem;
-  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.25rem 0.5rem rgb(0 0 0 / 0.1);
   display: flex;
   flex-direction: column-reverse;
   justify-content: flex-end;
diff --git a/resources/styles/molecules/featureVideo/index.scss b/resources/styles/molecules/featureVideo/index.scss
index 9944b3d..86390c2 100644
--- a/resources/styles/molecules/featureVideo/index.scss
+++ b/resources/styles/molecules/featureVideo/index.scss
@@ -41,7 +41,7 @@
       aspect-ratio: 16 / 9;
       object-fit: cover;
       display: block;
-      box-shadow: 0 16px 64px 0 rgba(0, 0, 0, 0.05);
+      box-shadow: 0 16px 64px 0 rgb(0 0 0 / 0.05);
     }
   }
 
diff --git a/resources/styles/molecules/list/index.scss b/resources/styles/molecules/list/index.scss
index 2e0468e..69aae03 100644
--- a/resources/styles/molecules/list/index.scss
+++ b/resources/styles/molecules/list/index.scss
@@ -10,6 +10,7 @@ ul {
 
 .list {
   --list-line-height: 1.125;
+
   line-height: var(--list-line-height);
   margin-bottom: 1rem;
   padding-left: 3rem;
diff --git a/resources/styles/molecules/logoGrid/index.scss b/resources/styles/molecules/logoGrid/index.scss
index bd0f9a0..804edf3 100644
--- a/resources/styles/molecules/logoGrid/index.scss
+++ b/resources/styles/molecules/logoGrid/index.scss
@@ -2,9 +2,9 @@
 
 .logoGrid {
   $b: &;
+
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   gap: fluid-rems(2, 3);
   justify-content: center;
   align-items: center;
@@ -30,6 +30,6 @@
   }
 
   &__link {
-    @include pseudo-link();
+    @include pseudo-link;
   }
 }
diff --git a/resources/styles/molecules/mobileNavigation/index.scss b/resources/styles/molecules/mobileNavigation/index.scss
index 82bafa8..88a5131 100644
--- a/resources/styles/molecules/mobileNavigation/index.scss
+++ b/resources/styles/molecules/mobileNavigation/index.scss
@@ -2,7 +2,7 @@
   --link-color: var(--accent-color);
 
   &__pane {
-    background: #fff;
+    background: #ffffff;
     box-shadow: var(--root-box-shadow-med);
     inset: 0 4.5rem 0 0;
     overflow-x: auto;
@@ -67,6 +67,6 @@
     appearance: none;
     border: 0;
     width: 100%;
-    background: #0000;
+    background: #00000000;
   }
 }
diff --git a/resources/styles/molecules/navigation/index.scss b/resources/styles/molecules/navigation/index.scss
index b5da4f6..31cc688 100644
--- a/resources/styles/molecules/navigation/index.scss
+++ b/resources/styles/molecules/navigation/index.scss
@@ -11,7 +11,7 @@
   &__link,
   &__button {
     border: 0;
-    background: #0000;
+    background: #00000000;
     color: var(--root-color);
     padding: 1.5rem;
   }
@@ -51,7 +51,7 @@
 
     &:has(#{$b}__dropdown) {
       #{$b}__button {
-        color: #000;
+        color: #000000;
 
         &::after {
           background: var(--color-gray-600);
diff --git a/resources/styles/molecules/pagination/index.scss b/resources/styles/molecules/pagination/index.scss
index 6531109..8b6fb06 100644
--- a/resources/styles/molecules/pagination/index.scss
+++ b/resources/styles/molecules/pagination/index.scss
@@ -43,6 +43,7 @@
 
   &__link {
     --accent-color: inherit;
+
     text-decoration: none;
     transition:
       background-color var(--duration-fast) var(--ease-out),
@@ -50,7 +51,7 @@
 
     &:hover {
       background: var(--accent-color-700);
-      color: #fff;
+      color: #ffffff;
     }
   }
 
diff --git a/resources/styles/molecules/tabs/index.scss b/resources/styles/molecules/tabs/index.scss
index d994c8e..e66ed46 100644
--- a/resources/styles/molecules/tabs/index.scss
+++ b/resources/styles/molecules/tabs/index.scss
@@ -34,9 +34,8 @@
   }
 
   &__button {
-    background: #0000;
+    background: #00000000;
     border: 0;
-
     color: inherit;
     cursor: pointer;
     display: none;
@@ -54,6 +53,7 @@
 
       &:hover {
         --tab__button-box-shadow: -2px;
+
         box-shadow: 0 var(--tab__button-box-shadow) var(--accent-color-400) inset;
         color: var(--color-gray-900);
       }
@@ -61,7 +61,9 @@
 
     &.-selected {
       display: block;
+
       --tab__button-box-shadow: -8px;
+
       color: var(--color-gray-900);
     }
   }
@@ -116,25 +118,25 @@
         white-space: nowrap;
         background: var(--color-gray-100);
         border-radius: 0.5rem;
-        box-shadow: 0px 1px 1px 0px var(--color-gray-200);
+        box-shadow: 0 1px 1px 0 var(--color-gray-200);
         padding: 0.5rem 1rem;
         margin-bottom: 0.5rem;
 
         &:hover {
-          background: #fff;
+          background: #ffffff;
           box-shadow: var(--root-box-shadow-med);
           border-radius: 8px;
         }
 
         &.-selected {
-          background: #fff;
+          background: #ffffff;
           border-radius: 8px 8px 0 0;
-          box-shadow: 0 0.5rem 0 #fff;
+          box-shadow: 0 0.5rem 0 #ffffff;
         }
       }
 
       #{$b}__panel {
-        background: #fff;
+        background: #ffffff;
         padding: 1rem;
       }
     }
diff --git a/resources/styles/molecules/testimonial/index.scss b/resources/styles/molecules/testimonial/index.scss
index e9a14eb..acee9f9 100644
--- a/resources/styles/molecules/testimonial/index.scss
+++ b/resources/styles/molecules/testimonial/index.scss
@@ -62,6 +62,7 @@
 
   &__icon {
     --icon-fill-color: var(--accent-color-600);
+
     grid-area: icon;
     height: 2.0625rem;
     justify-self: end;
diff --git a/resources/styles/organisms/basicSection/index.scss b/resources/styles/organisms/basicSection/index.scss
index 97214e4..459246b 100644
--- a/resources/styles/organisms/basicSection/index.scss
+++ b/resources/styles/organisms/basicSection/index.scss
@@ -37,15 +37,19 @@
   &__image {
     order: 1;
   }
+
   &__testimonial {
     order: 2;
   }
+
   &__media {
     order: 3;
   }
+
   &__text {
     order: 4;
   }
+
   &__cta {
     order: 5;
   }
diff --git a/resources/styles/organisms/hero/index.scss b/resources/styles/organisms/hero/index.scss
index 9ddcb3b..89c200d 100644
--- a/resources/styles/organisms/hero/index.scss
+++ b/resources/styles/organisms/hero/index.scss
@@ -22,12 +22,12 @@
     }
 
     /* should be max mobile columns + tablet outer gutters */
-    @media (min-width: 368px) {
+    @media (width >= 368px) {
       --container-width: 744px;
     }
 
     /* should be max tablet columns + desktop outer gutters */
-    @media (min-width: 808px) {
+    @media (width >= 808px) {
       --container-width: 1300px;
     }
   }
@@ -55,22 +55,22 @@
     }
 
     &.-fade::after {
-      background: radial-gradient(circle farthest-side at 50% 25%, #0000 35vw, #0002 45vw, #0004);
+      background: radial-gradient(circle farthest-side at 50% 25%, #00000000 35vw, #00000022 45vw, #00000044);
       content: '';
       z-index: 1;
 
       @include at(md) {
-        background: radial-gradient(circle farthest-side at calc(50vw + min(25vw, 325px)), #0004 min(15vw, 195px), #0008 min(25vw, 325px), #000c);
+        background: radial-gradient(circle farthest-side at calc(50vw + min(25vw, 325px)), #00000044 min(15vw, 195px), #00000088 min(25vw, 325px), #000000cc);
       }
     }
 
     &.-vignette::after {
-      background: radial-gradient(ellipse closest-side at 50% 35%, #0002 40vw, #0004);
+      background: radial-gradient(ellipse closest-side at 50% 35%, #00000022 40vw, #00000044);
       content: '';
       z-index: 1;
 
       @include at(md) {
-        background: radial-gradient(ellipse at center, #0004 40%, #000c 80%);
+        background: radial-gradient(ellipse at center, #00000044 40%, #000000cc 80%);
       }
     }
 
@@ -79,7 +79,7 @@
       z-index: 1;
 
       @include at(md) {
-        background: linear-gradient(to right, #0008 50%, #0000 calc(50% + 1px));
+        background: linear-gradient(to right, #00000088 50%, #00000000 calc(50% + 1px));
       }
     }
 
@@ -92,6 +92,7 @@
 
     &.-multiply {
       background: white;
+
       &::before {
         content: '';
         background: var(--accent-color);
@@ -134,16 +135,20 @@
   &__image {
     order: 1;
   }
+
   &__testimonial {
     order: 2;
   }
+
   &__media {
     order: 3;
   }
+
   &__text {
     order: 4;
     padding: 2rem 0;
   }
+
   &__cta {
     order: 5;
   }
diff --git a/resources/styles/organisms/mediaBanner/index.scss b/resources/styles/organisms/mediaBanner/index.scss
index 7fb898c..84f7fa0 100644
--- a/resources/styles/organisms/mediaBanner/index.scss
+++ b/resources/styles/organisms/mediaBanner/index.scss
@@ -4,6 +4,7 @@
   overflow: hidden;
   display: grid;
   grid-template-areas: 'media';
+
   --media-banner-aspect-ratio: 65 / 24;
 
   // Container instance - grid and border radius
@@ -41,6 +42,7 @@
     width: 100%;
     margin-bottom: 0;
     aspect-ratio: var(--media-banner-aspect-ratio);
+
     // Override section's --accent-color: #fff to use default purple for icons
     --accent-color: var(--color-purple);
   }
@@ -108,7 +110,7 @@
 
   &__title {
     margin-bottom: 1.5rem;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    text-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
   }
 
   &__actions {
@@ -145,8 +147,7 @@
     // When inside media class, use media's grid system (media__trigger handles positioning)
     .media & {
       grid-area: 1 / 1;
-      align-self: center;
-      justify-self: center;
+      place-self: center center;
       z-index: 2; // Above the mask (z-index: 1)
       position: relative;
     }
@@ -160,7 +161,7 @@
 
   &__overlay {
     grid-area: media;
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgb(0 0 0 / 0.3);
     pointer-events: none;
     z-index: 1;
   }
diff --git a/resources/styles/organisms/message/index.scss b/resources/styles/organisms/message/index.scss
index 07255c9..5e8cebf 100644
--- a/resources/styles/organisms/message/index.scss
+++ b/resources/styles/organisms/message/index.scss
@@ -9,11 +9,11 @@
   border-radius: 0.5rem;
   margin-bottom: 2rem;
   box-shadow:
-    0 1px 1px 0 rgba(from var(--accent-color-900) r g b / 0.2),
-    0 0.5rem 1.5rem 0 rgba(from var(--accent-color) r g b / 0.1);
+    0 1px 1px 0 rgb(from var(--accent-color-900) r g b / 0.2),
+    0 0.5rem 1.5rem 0 rgb(from var(--accent-color) r g b / 0.1);
 
   &__icon {
-    --icon-stroke-color: #fff;
+    --icon-stroke-color: #ffffff;
     --icon-fill-color: var(--accent-color);
   }
 
@@ -24,13 +24,15 @@
   &__close {
     appearance: none;
     border: 0;
-    background: #0000;
+    background: #00000000;
     color: inherit;
     height: 2rem;
-    border-left: 1px solid rgba(from var(--accent-color) r g b / 0.5);
+    border-left: 1px solid rgb(from var(--accent-color) r g b / 0.5);
     display: grid;
     place-content: center;
+
     --icon-stroke-width: 1;
+
     grid: 1rem / 1rem;
   }
 
@@ -40,6 +42,6 @@
 
   &.-dark {
     background: var(--accent-color-900);
-    color: #fff;
+    color: #ffffff;
   }
 }
diff --git a/resources/styles/organisms/section/index.scss b/resources/styles/organisms/section/index.scss
index 81ab932..c848905 100644
--- a/resources/styles/organisms/section/index.scss
+++ b/resources/styles/organisms/section/index.scss
@@ -1,5 +1,5 @@
 .section {
-  --accent-color: #fff;
+  --accent-color: #ffffff;
 
   row-gap: 16px;
   padding: 5rem 0;
diff --git a/resources/styles/organisms/siteFooter/index.scss b/resources/styles/organisms/siteFooter/index.scss
index 70749dc..e5b3d20 100644
--- a/resources/styles/organisms/siteFooter/index.scss
+++ b/resources/styles/organisms/siteFooter/index.scss
@@ -16,6 +16,7 @@
         'utility utility'
         / auto 1fr;
     }
+
     @include at(lg) {
       grid:
         'info nav     nav   ' auto
diff --git a/resources/styles/organisms/siteHeader/index.scss b/resources/styles/organisms/siteHeader/index.scss
index 8241010..8f3b837 100644
--- a/resources/styles/organisms/siteHeader/index.scss
+++ b/resources/styles/organisms/siteHeader/index.scss
@@ -2,6 +2,7 @@
 
 .siteHeader {
   --gap: var(--root-gap, 16px);
+
   padding: var(--gap) 0;
 
   &__content {
diff --git a/resources/styles/organisms/slider/index.scss b/resources/styles/organisms/slider/index.scss
index 389d912..1c6e40c 100644
--- a/resources/styles/organisms/slider/index.scss
+++ b/resources/styles/organisms/slider/index.scss
@@ -39,7 +39,7 @@
   }
 
   swiper-container::part(bullet-active) {
-    background-color: #000;
+    background-color: #000000;
     flex-shrink: 0;
     height: 1.5rem;
     width: 1.5rem;
@@ -66,7 +66,7 @@
     border-radius: 3rem;
     height: 1rem;
     padding: 1rem;
-    color: #fff;
+    color: #ffffff;
     display: none;
 
     @include at(md) {
@@ -172,7 +172,7 @@
       }
 
       .swiper-slide-next {
-        mask: linear-gradient(to right, #fff, #0000 50%);
+        mask: linear-gradient(to right, #ffffff, #00000000 50%);
       }
     }
   }
diff --git a/resources/styles/organisms/stats/index.scss b/resources/styles/organisms/stats/index.scss
index 351cdf8..fac1511 100644
--- a/resources/styles/organisms/stats/index.scss
+++ b/resources/styles/organisms/stats/index.scss
@@ -37,7 +37,7 @@
     text-align: center;
     gap: 1rem;
     padding: 1.5rem;
-    background-color: #fff;
+    background-color: #ffffff;
   }
 
   &__icon {
@@ -77,6 +77,7 @@
     #{$b}__grid {
       @include at(lg) {
         --columns: 3;
+
         grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
       }
     }
diff --git a/resources/styles/organisms/table/index.scss b/resources/styles/organisms/table/index.scss
index 95b69f7..7d75f71 100644
--- a/resources/styles/organisms/table/index.scss
+++ b/resources/styles/organisms/table/index.scss
@@ -51,11 +51,11 @@
     scroll-timeline: --table x;
 
     &.-fadeRight {
-      mask-image: linear-gradient(90deg, #fff calc(100% - var(--table-fade)), #0000 100%);
+      mask-image: linear-gradient(90deg, #ffffff calc(100% - var(--table-fade)), #00000000 100%);
     }
 
     &.-fadeBoth {
-      mask-image: linear-gradient(90deg, #0000, #fff var(--table-starting-fade) calc(100% - var(--table-fade)), #0000 100%);
+      mask-image: linear-gradient(90deg, #00000000, #ffffff var(--table-starting-fade) calc(100% - var(--table-fade)), #00000000 100%);
     }
 
     &.-stickHead {
@@ -108,12 +108,15 @@
     --table-starting-fade: 0;
     --table-fade: var(--max-table-fade);
   }
+
   10% {
     --table-starting-fade: var(--max-table-fade);
   }
+
   90% {
     --table-fade: var(--max-table-fade);
   }
+
   100% {
     --table-starting-fade: var(--max-table-fade);
     --table-fade: 0;
diff --git a/resources/styles/utilities/colors/index.scss b/resources/styles/utilities/colors/index.scss
index 5dba165..0fd1ee9 100644
--- a/resources/styles/utilities/colors/index.scss
+++ b/resources/styles/utilities/colors/index.scss
@@ -1,20 +1,20 @@
 .accent-primary {
   --accent-color: var(--color-purple);
-  --link-color: #fff;
-  --heading-color: #fff;
+  --link-color: #ffffff;
+  --heading-color: #ffffff;
 }
 
 .accent-secondary {
   --accent-color: var(--color-blue);
   --accent-color-700: var(--color-blue-700);
-  --link-color: #fff;
-  --heading-color: #fff;
+  --link-color: #ffffff;
+  --heading-color: #ffffff;
 }
 
 .accent-tertiary {
   --accent-color: var(--color-aqua);
   --accent-color-700: var(--color-aqua-700);
-  --link-color: color-mix(in srgb, var(--color-purple), #000 40%);
+  --link-color: color-mix(in srgb, var(--color-purple), #000000 40%);
 }
 
 .accent-white {
@@ -23,14 +23,14 @@
   --accent-color-200: rgb(255 255 255 / 0.4);
   --accent-color-300: rgb(255 255 255 / 0.6);
   --accent-color-400: rgb(255 255 255 / 0.8);
-  --accent-color: #fff;
+  --accent-color: #ffffff;
   --accent-color-600: rgb(255 255 255 / 0.8);
   --accent-color-700: rgb(255 255 255 / 0.6);
   --accent-color-text: var(--color-purple);
 }
 
 .accent-black {
-  --accent-color: #000;
+  --accent-color: #000000;
   --accent-color-600: rgb(0 0 0 / 0.8);
   --accent-color-700: rgb(0 0 0 / 0.6);
   --accent-color-800: rgb(0 0 0 / 0.4);
diff --git a/stylelint.config.mjs b/stylelint.config.mjs
new file mode 100644
index 0000000..c773a64
--- /dev/null
+++ b/stylelint.config.mjs
@@ -0,0 +1,13 @@
+/** @type {import("stylelint").Config} */
+export default {
+  extends: ['stylelint-config-standard-scss'],
+  customSyntax: 'postcss-scss',
+  rules: {
+    'alpha-value-notation': 'number',
+    'color-hex-length': 'long',
+    'custom-property-pattern': null,
+    'container-name-pattern': '^(?:#\{[^}]+\}|[a-z][a-z0-9-]*)$',
+    'selector-class-pattern': '^-?[a-z][a-zA-Z0-9]*(__[a-zA-Z0-9]+)?(-[a-zA-Z0-9]+)*$',
+    'scss/at-extend-no-missing-placeholder': null,
+  },
+}

From 76d5370421c06d23c4d0abcf6ffbf10286b5b8c4 Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Wed, 4 Feb 2026 17:18:37 -0500
Subject: [PATCH 03/11] pass prettier

---
 resources/_preview.html                       |  13 +-
 resources/styles/atoms/media/media.html       |  25 +--
 resources/styles/atoms/tag/tag.html           | 173 +++++++++---------
 .../styles/molecules/card/card--tags.html     |  63 +++----
 4 files changed, 137 insertions(+), 137 deletions(-)

diff --git a/resources/_preview.html b/resources/_preview.html
index 0ba0d1b..89b06e6 100644
--- a/resources/_preview.html
+++ b/resources/_preview.html
@@ -1,15 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <title>${component.name}</title>
     <!-- ${template ? `Using template ${template}` : "Using builtin template"} -->
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
     <div
       id="app"
-      ${component.url?.match(/atoms|molecules/) ? 'style="padding: 2rem"' : ''}>
+      style="
+        $ {
+          component.url?.match(/atoms|molecules/)?'padding: 2rem': '';
+        }
+      "
+    >
       ${code}
     </div>
     ${includes}
diff --git a/resources/styles/atoms/media/media.html b/resources/styles/atoms/media/media.html
index fb451fb..b693b27 100644
--- a/resources/styles/atoms/media/media.html
+++ b/resources/styles/atoms/media/media.html
@@ -1,12 +1,12 @@
 <div class="media">
   <p-lazy>
     <video class="media__content" inert controls autoplay playsinline>
-      <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
+      <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
       Your browser does not support the video tag.
     </video>
     <template #placeholder="{ load, modifier }">
       <picture class="media__mask" :class="modifier">
-          <img srcset="https://unsplash.it/320/176?random&gravity=center" alt="" width="320" height="176">
+        <img srcset="https://unsplash.it/320/176?random&gravity=center" alt="" width="320" height="176" />
       </picture>
       <button class="media__trigger" @click="load" :class="modifier">
         <span class="srOnly">play</span>
@@ -19,32 +19,33 @@
 <div class="media">
   <p-lazy>
     <video inert controls autoplay playsinline>
-      <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
+      <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
       Your browser does not support the video tag.
     </video>
     <template #placeholder="{ load, modifier }">
-        <picture class="media__mask" :class="modifier">
-            <source srcset="https://unsplash.it/320/176?random&gravity=center" media="(min-width: 768px)">
-            <source srcset="https://unsplash.it/320/176?random&gravity=center" media="(min-width: 480px)">
-            <img class="lazyload" srcset="https://unsplash.it/320/176?random&gravity=center" alt="" width="320" height="176">
-        </picture>
+      <picture class="media__mask" :class="modifier">
+        <source srcset="https://unsplash.it/320/176?random&gravity=center" media="(min-width: 768px)" />
+        <source srcset="https://unsplash.it/320/176?random&gravity=center" media="(min-width: 480px)" />
+        <img class="lazyload" srcset="https://unsplash.it/320/176?random&gravity=center" alt="" width="320" height="176" />
+      </picture>
       <button class="media__trigger" :class="modifier" @click="load">
         <span class="srOnly">play</span>
         <svg class="media__icon icon -circle -light" viewBox="0 0 96 96"><use href="/main-icons-sprite.svg#play" /></svg>
       </button>
     </template>
+  </p-lazy>
 </div>
 
-<br>
+<br />
 
 <div class="media">
   <p-lazy>
     <iframe data-src="https://player.vimeo.com/video/818944000?h=e8674039c8&autoplay=1&title=0&byline=0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
     <template #placeholder="{ load, modifier }">
       <picture class="media__mask" :class="modifier">
-        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 768px)">
-        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 480px)">
-        <img class="lazyload" srcset="https://unsplash.it/267/150?random&gravity=center" alt="" width="267" height="150">
+        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 768px)" />
+        <source srcset="https://unsplash.it/267/150?random&gravity=center" media="(min-width: 480px)" />
+        <img class="lazyload" srcset="https://unsplash.it/267/150?random&gravity=center" alt="" width="267" height="150" />
       </picture>
       <button class="media__trigger" :class="modifier" @click="load">
         <span class="srOnly">play</span>
diff --git a/resources/styles/atoms/tag/tag.html b/resources/styles/atoms/tag/tag.html
index 2a0b1db..43b67b6 100644
--- a/resources/styles/atoms/tag/tag.html
+++ b/resources/styles/atoms/tag/tag.html
@@ -1,105 +1,102 @@
 <div class="actions">
-    <!-- .tag class on <div> element ------------------->
-    <div class="tag accent-secondary">
-        <svg class="tag__icon">
-            <use href="/main-icons-sprite.svg#tag">
-        </svg>
-        .tag class on div
-    </div>
+  <!-- .tag class on <div> element ------------------->
+  <div class="tag accent-secondary">
+    <svg class="tag__icon">
+      <use href="/main-icons-sprite.svg#tag" />
+    </svg>
+    .tag class on div
+  </div>
 
-    <div class="tag -active accent-secondary">
-        <svg class="tag__icon">
-            <use href="/main-icons-sprite.svg#tag">
-        </svg>
-        Active Tag
-    </div>
+  <div class="tag -active accent-secondary">
+    <svg class="tag__icon">
+      <use href="/main-icons-sprite.svg#tag" />
+    </svg>
+    Active Tag
+  </div>
 
-    <!-- Inactive Tag -->
-    <div class="tag -inactive accent-secondary">
-        <svg class="tag__icon">
-            <use href="/main-icons-sprite.svg#tag">
-        </svg>
-        Inactive Tag
-    </div>
+  <!-- Inactive Tag -->
+  <div class="tag -inactive accent-secondary">
+    <svg class="tag__icon">
+      <use href="/main-icons-sprite.svg#tag" />
+    </svg>
+    Inactive Tag
+  </div>
 
-    <!-- Button Tag -->
-    <button class="tag accent-secondary">
-        <svg class="tag__icon">
-            <use href="/main-icons-sprite.svg#tag">
-        </svg>
-        Button Tag
-    </button>
-
-    
+  <!-- Button Tag -->
+  <button class="tag accent-secondary">
+    <svg class="tag__icon">
+      <use href="/main-icons-sprite.svg#tag" />
+    </svg>
+    Button Tag
+  </button>
 </div>
 
 <div class="actions">
-    <!-- Checkbox Tag -->
-    <label class="tag field -inline accent-secondary" for="tag-checkbox-inactive">
-        <svg class="tag__icon">
-            <use href="/main-icons-sprite.svg#tag">
-        </svg>
-        
-        Unchecked Checkbox Tag
-        <input class="tag__input" type="checkbox" id="tag-checkbox-inactive">
-    </label>
+  <!-- Checkbox Tag -->
+  <label class="tag field -inline accent-secondary" for="tag-checkbox-inactive">
+    <svg class="tag__icon">
+      <use href="/main-icons-sprite.svg#tag" />
+    </svg>
+
+    Unchecked Checkbox Tag
+    <input class="tag__input" type="checkbox" id="tag-checkbox-inactive" />
+  </label>
+
+  <label class="tag field -inline accent-secondary" for="tag-checkbox-active">
+    <svg class="tag__icon">
+      <use href="/main-icons-sprite.svg#tag" />
+    </svg>
 
-    <label class="tag field -inline accent-secondary" for="tag-checkbox-active">
-        <svg class="tag__icon">
-            <use href="/main-icons-sprite.svg#tag">
-        </svg>
-        
-        Checked Checkbox Tag
-        <input class="tag__input" type="checkbox" id="tag-checkbox-active" checked>
-    </label>
+    Checked Checkbox Tag
+    <input class="tag__input" type="checkbox" id="tag-checkbox-active" checked />
+  </label>
 
-    <!-- Dismissable Tag -->
-    <label class="tag field -inline -dismissable accent-secondary" for="tag-checkbox-dismissable">
-        <svg class="tag__icon">
-            <use href="/main-icons-sprite.svg#tag" />
-            <use href="/main-icons-sprite.svg#close" />
-        </svg>
-        Dissmissable Checkbox Tag
-        <input class="tag__input" type="checkbox" id="tag-checkbox-dismissable" checked>
-    </label>
+  <!-- Dismissable Tag -->
+  <label class="tag field -inline -dismissable accent-secondary" for="tag-checkbox-dismissable">
+    <svg class="tag__icon">
+      <use href="/main-icons-sprite.svg#tag" />
+      <use href="/main-icons-sprite.svg#close" />
+    </svg>
+    Dissmissable Checkbox Tag
+    <input class="tag__input" type="checkbox" id="tag-checkbox-dismissable" checked />
+  </label>
 
-    <label class="tag field -inline accent-secondary" for="tag-checkbox-disabled">
-        <svg class="tag__icon">
-            <use href="/main-icons-sprite.svg#tag">
-        </svg>
-        
-        Disabled Checkbox Tag
-        <input class="tag__input" type="checkbox" id="tag-checkbox-disabled" disabled>
-    </label>
+  <label class="tag field -inline accent-secondary" for="tag-checkbox-disabled">
+    <svg class="tag__icon">
+      <use href="/main-icons-sprite.svg#tag" />
+    </svg>
+
+    Disabled Checkbox Tag
+    <input class="tag__input" type="checkbox" id="tag-checkbox-disabled" disabled />
+  </label>
 </div>
 
 <!-- Radio Tag -->
 <div class="actions">
+  <!-- <tag> element for radio input -->
+  <label class="tag field -inline accent-secondary" for="tag-radio-inactive">
+    <svg class="tag__icon">
+      <use href="/main-icons-sprite.svg#tag" />
+    </svg>
+    Inactive Radio Tag
+    <input class="tag__input" type="radio" name="radio-tag-group" id="tag-radio-inactive" />
+  </label>
 
-    <!-- <tag> element for radio input -->
-    <label class="tag field -inline accent-secondary" for="tag-radio-inactive">
-        <svg class="tag__icon">
-            <use href="/main-icons-sprite.svg#tag">
-        </svg>
-        Inactive Radio Tag
-        <input class="tag__input" type="radio" name="radio-tag-group" id="tag-radio-inactive">
-    </label>
-
-    <!-- .tag class on <label> element for radio input -->
-    <label class="tag field -inline accent-secondary" for="tag-radio-active">
-        <svg class="tag__icon">
-            <use href="/main-icons-sprite.svg#tag">
-        </svg>
-        Active Radio Tag
-        <input class="tag__input" type="radio" name="radio-tag-group" id="tag-radio-active" checked>
-    </label>
+  <!-- .tag class on <label> element for radio input -->
+  <label class="tag field -inline accent-secondary" for="tag-radio-active">
+    <svg class="tag__icon">
+      <use href="/main-icons-sprite.svg#tag" />
+    </svg>
+    Active Radio Tag
+    <input class="tag__input" type="radio" name="radio-tag-group" id="tag-radio-active" checked />
+  </label>
 
-        <!-- disabled tag for radio input -->
-        <label class="tag field -inline accent-secondary" for="tag-radio-disabled">
-        <svg class="tag__icon">
-            <use href="/main-icons-sprite.svg#tag">
-        </svg>
-        Disabled Radio Tag
-        <input class="tag__input" type="radio" name="radio-tag-group" id="tag-radio-disabled" disabled>
-    </label>
+  <!-- disabled tag for radio input -->
+  <label class="tag field -inline accent-secondary" for="tag-radio-disabled">
+    <svg class="tag__icon">
+      <use href="/main-icons-sprite.svg#tag" />
+    </svg>
+    Disabled Radio Tag
+    <input class="tag__input" type="radio" name="radio-tag-group" id="tag-radio-disabled" disabled />
+  </label>
 </div>
diff --git a/resources/styles/molecules/card/card--tags.html b/resources/styles/molecules/card/card--tags.html
index e416596..677ab13 100644
--- a/resources/styles/molecules/card/card--tags.html
+++ b/resources/styles/molecules/card/card--tags.html
@@ -1,37 +1,34 @@
 <h2>Card Tags</h2>
-<div class="card" style="max-width: 25.75rem;">
-    <div class="card__content">
-        <ul class="card__tagList">
-            <li class="card__tagListItem">
-                <p class="tag">
-                    <svg class="tag__icon">
-                        <use href="/main-icons-sprite.svg#tag" />
-                    </svg>
-                    Simple Tag
-                </p>
-            </li>
-            <li class="card__tagListItem">
-                <p class="tag">
-                    <svg class="tag__icon">
-                        <use href="/main-icons-sprite.svg#tag" />
-                    </svg>
-                    Simple Tag
-                </p>
-            </li>
-        </ul>
-        <span class="card__title h3">
-            Title of card that will fall to two lines
-        </span>
-        <p class="card__meta">
-            Posted Aug 12, 2023 by <a href="#" class="card__metaLink">Daphne Writesposts</a>
+<div class="card" style="max-width: 25.75rem">
+  <div class="card__content">
+    <ul class="card__tagList">
+      <li class="card__tagListItem">
+        <p class="tag">
+          <svg class="tag__icon">
+            <use href="/main-icons-sprite.svg#tag" />
+          </svg>
+          Simple Tag
         </p>
-        <p class="card__meta">
-            <svg class="card__metaIcon">
-                <use href="/main-icons-sprite.svg#clock" />
-            </svg>15 Minute Read</a>
+      </li>
+      <li class="card__tagListItem">
+        <p class="tag">
+          <svg class="tag__icon">
+            <use href="/main-icons-sprite.svg#tag" />
+          </svg>
+          Simple Tag
         </p>
-    </div>
-        <div class="card__imageWrapper">
-        <img src="https://panoramicireland.com/media/k2/items/cache/cb9c495b17bc28a44ffb50c55572ed63_XL.jpg" alt="" class="card__image">
-    </div>
+      </li>
+    </ul>
+    <span class="card__title h3"> Title of card that will fall to two lines </span>
+    <p class="card__meta">Posted Aug 12, 2023 by <a href="#" class="card__metaLink">Daphne Writesposts</a></p>
+    <p class="card__meta">
+      <svg class="card__metaIcon">
+        <use href="/main-icons-sprite.svg#clock" />
+      </svg>
+      15 Minute Read
+    </p>
+  </div>
+  <div class="card__imageWrapper">
+    <img src="https://panoramicireland.com/media/k2/items/cache/cb9c495b17bc28a44ffb50c55572ed63_XL.jpg" alt="" class="card__image" />
+  </div>
 </div>

From 73a57b72c0a04e9529b3f2fc4619784557ea9f07 Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Thu, 5 Feb 2026 12:53:45 -0500
Subject: [PATCH 04/11] prettier, eslint, stylelint

---
 eslint.config.js                              |  36 ++++
 package.json                                  | 155 +++++++-----------
 resources/js/components/PDirectionalKeys.vue  |   2 +-
 resources/js/components/PDismissable.vue      |   2 +-
 resources/js/components/PLazy.vue             |   4 +-
 resources/js/components/POpenable.vue         |   9 +-
 resources/js/components/PSlider.vue           |   6 +-
 resources/js/components/PTabs.vue             |   6 +-
 resources/js/components/PWistia.vue           |   4 +-
 resources/js/components/PYouTube.vue          |   8 +-
 resources/js/composables/FocusableElements.js |   2 +-
 .../js/composables/UseDirectionalKeys.js      |   2 -
 12 files changed, 119 insertions(+), 117 deletions(-)
 create mode 100644 eslint.config.js

diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..774c5f4
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,36 @@
+import js from '@eslint/js'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import vue from 'eslint-plugin-vue'
+import globals from 'globals'
+
+const vueMacros = {
+  defineProps: 'readonly',
+  defineEmits: 'readonly',
+  defineExpose: 'readonly',
+  defineOptions: 'readonly',
+  withDefaults: 'readonly',
+}
+
+export default [
+  js.configs.recommended,
+  ...vue.configs['flat/essential'],
+  {
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...vueMacros,
+      },
+    },
+  },
+  eslintConfigPrettier,
+  {
+    files: ['bin.js', 'vite.config.js', 'vite.config.template.js', 'index.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+]
diff --git a/package.json b/package.json
index c8889da..2fe3762 100644
--- a/package.json
+++ b/package.json
@@ -1,98 +1,61 @@
 {
-    "name": "@imarc/pronto",
-    "version": "2.0.4",
-    "description": "A light, customizable frontend starter kit for the component library",
-    "author": "Imarc",
-    "license": "Apache-2.0",
-    "bin": "./bin.js",
-    "main": "./index.js",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/imarc/component-library.git"
-    },
-    "type": "module",
-    "bugs": {
-        "url": "https://github.com/imarc/component-library/issues"
-    },
-    "homepage": "https://github.com/imarc/component-library#readme",
-    "scripts": {
-        "dev": "vite",
-        "prod": "vite build",
-        "build": "vite build",
-        "preview": "vite preview"
-    },
-    "dependencies": {
-        "@clack/prompts": "^0.9.1",
-        "@imarc/vitrine": "^1.2.1",
-        "modern-normalize": "^3.0.1",
-        "swiper": "^11.2.6",
-        "vue": "^3.4.31"
-    },
-    "devDependencies": {
-        "@vitejs/plugin-vue": "*",
-        "postcss-scss": "^4.0.9",
-        "prettier": "^3.8.1",
-        "sass": "^1.83.4",
-        "stylelint": "^17.1.1",
-        "stylelint-config-standard": "^40.0.0",
-        "stylelint-config-standard-scss": "^17.0.0",
-        "stylelint-scss": "^7.0.0",
-        "vite": "^6.0.7 || ^7.0.0"
-    },
-    "browserslist": [
-        "defaults"
-    ],
-    "prettier": {
-        "arrowParens": "avoid",
-        "printWidth": 999,
-        "semi": false,
-        "singleQuote": true
-    },
-    "eslintConfig": {
-        "env": {
-            "browser": true,
-            "es6": true,
-            "vue/setup-compiler-macros": true
-        },
-        "extends": [
-            "plugin:vue/vue3-recommended",
-            "standard"
-        ],
-        "globals": {
-            "Atomics": "readonly",
-            "SharedArrayBuffer": "readonly"
-        },
-        "parserOptions": {
-            "ecmaVersion": 2020,
-            "sourceType": "module"
-        },
-        "plugins": [
-            "vue"
-        ],
-        "rules": {
-            "comma-dangle": [
-                "warn",
-                {
-                    "arrays": "always-multiline",
-                    "objects": "always-multiline",
-                    "imports": "never",
-                    "exports": "never",
-                    "functions": "never"
-                }
-            ],
-            "indent": [
-                "warn",
-                4
-            ],
-            "vue/html-indent": [
-                "warn",
-                4
-            ]
-        }
-    },
-    "peerDependencies": {
-        "@vitejs/plugin-vue": "^5.2.3 || ^6.0.0",
-        "@vueform/multiselect": "^2.6.11",
-        "sass-embedded": "^1.87.0"
-    }
+  "name": "@imarc/pronto",
+  "version": "2.0.4",
+  "description": "A light, customizable frontend starter kit for the component library",
+  "author": "Imarc",
+  "license": "Apache-2.0",
+  "bin": "./bin.js",
+  "main": "./index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/imarc/component-library.git"
+  },
+  "type": "module",
+  "bugs": {
+    "url": "https://github.com/imarc/component-library/issues"
+  },
+  "homepage": "https://github.com/imarc/component-library#readme",
+  "scripts": {
+    "dev": "vite",
+    "prod": "vite build",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.1",
+    "@imarc/vitrine": "^1.2.1",
+    "modern-normalize": "^3.0.1",
+    "swiper": "^11.2.6",
+    "vue": "^3.4.31"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@vitejs/plugin-vue": "*",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-vue": "^10.7.0",
+    "globals": "^15.15.0",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.8.1",
+    "sass": "^1.83.4",
+    "stylelint": "^17.1.1",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-config-standard-scss": "^17.0.0",
+    "stylelint-scss": "^7.0.0",
+    "vite": "^6.0.7 || ^7.0.0"
+  },
+  "browserslist": [
+    "defaults"
+  ],
+  "prettier": {
+    "arrowParens": "avoid",
+    "printWidth": 999,
+    "semi": false,
+    "singleQuote": true
+  },
+  "peerDependencies": {
+    "@vitejs/plugin-vue": "^5.2.3 || ^6.0.0",
+    "@vueform/multiselect": "^2.6.11",
+    "sass-embedded": "^1.87.0"
+  }
 }
diff --git a/resources/js/components/PDirectionalKeys.vue b/resources/js/components/PDirectionalKeys.vue
index 1b9d2b1..b6bcc24 100644
--- a/resources/js/components/PDirectionalKeys.vue
+++ b/resources/js/components/PDirectionalKeys.vue
@@ -8,7 +8,7 @@ const test = evt => {
   console.log('test', evt)
 }
 
-//useDirectionalKeys(...slots.default())
+useDirectionalKeys(...slots.default())
 </script>
 <template>
   <slot @keydown="test" @click="test" />
diff --git a/resources/js/components/PDismissable.vue b/resources/js/components/PDismissable.vue
index 85cb18a..18b47fd 100644
--- a/resources/js/components/PDismissable.vue
+++ b/resources/js/components/PDismissable.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 
-const { name } = defineProps({ name: { type: String } })
+const { name } = defineProps({ name: { type: String, required: true } })
 
 const open = ref(name ? sessionStorage[name] !== 'dismissed' : true)
 
diff --git a/resources/js/components/PLazy.vue b/resources/js/components/PLazy.vue
index 4e5661f..f04da81 100644
--- a/resources/js/components/PLazy.vue
+++ b/resources/js/components/PLazy.vue
@@ -56,9 +56,9 @@ const load = async () => {
 
 <template>
   <div ref="content">
-    <slot name="default"></slot>
+    <slot name="default" />
   </div>
-  <slot name="placeholder" v-bind="{ load, loaded, modifier }"></slot>
+  <slot name="placeholder" v-bind="{ load, loaded, modifier }" />
 </template>
 
 <style scoped>
diff --git a/resources/js/components/POpenable.vue b/resources/js/components/POpenable.vue
index 656480f..0d916b4 100644
--- a/resources/js/components/POpenable.vue
+++ b/resources/js/components/POpenable.vue
@@ -3,7 +3,7 @@ const openableGroups = {}
 </script>
 
 <script setup>
-import { ref, nextTick, useSlots, useTemplateRef } from 'vue'
+import { ref, nextTick, useTemplateRef } from 'vue'
 
 import focusableElements from '../composables/FocusableElements.js'
 
@@ -16,7 +16,6 @@ const { closeOnBlur, refocus, label, name, openOnHover, hoverOrClick } = defineP
   hoverOrClick: { type: Boolean, default: false },
 })
 const emit = defineEmits(['open', 'close'])
-const slots = useSlots()
 const button = useTemplateRef('button')
 const openable = useTemplateRef('openable')
 const open = ref(false)
@@ -34,8 +33,6 @@ const pressEscape = evt => {
   }
 }
 
-let escapeHandler = null
-
 const updateGroup = open => {
   if (!name) {
     return
@@ -128,7 +125,9 @@ if (hoverOrClick) {
 
 <template>
   <button v-bind="$attrs" ref="button" v-on="bindings">
-    <slot name="toggle" v-bind="bindings">{{ label }}</slot>
+    <slot name="toggle" v-bind="bindings">
+      {{ label }}
+    </slot>
   </button>
   <div ref="openable" v-on="openOnHover || hoverOrClick ? { mouseover, mouseout } : {}">
     <slot v-if="open" v-bind="bindings" />
diff --git a/resources/js/components/PSlider.vue b/resources/js/components/PSlider.vue
index 71115d7..a509804 100644
--- a/resources/js/components/PSlider.vue
+++ b/resources/js/components/PSlider.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { register } from 'swiper/element/bundle'
-import { computed, ref, useTemplateRef, watchEffect } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 
 register()
 
@@ -19,6 +19,8 @@ const init = e => {
   </swiper-container>
 
   <ul>
-    <li v-for="(slide, i) of slides">{{ i }}</li>
+    <li v-for="(slide, i) of slides" :key="i">
+      {{ i }}
+    </li>
   </ul>
 </template>
diff --git a/resources/js/components/PTabs.vue b/resources/js/components/PTabs.vue
index 93e8d74..ed88b82 100644
--- a/resources/js/components/PTabs.vue
+++ b/resources/js/components/PTabs.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, useTemplateRef, isRef, isReactive, watchEffect } from 'vue'
+import { computed, ref, useTemplateRef, watchEffect } from 'vue'
 import focusWithArrows from '/resources/js/composables/focusWithArrows'
 
 const props = defineProps({
@@ -50,14 +50,14 @@ const next = () => {
         <span class="srOnly">previous</span>
         <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
       </button>
-      <button class="tabs__button" :class="{ '-selected': tab.selected }" v-for="tab in tabs" role="tab" :aria-selected="tab.selected" :aria-controls="tab.panelId" :id="tab.buttonId" ref="tablist" :tabindex="tab.tabindex" v-text="tab.title"></button>
+      <button v-for="tab in tabs" :id="tab.buttonId" :key="tab.buttonId" ref="tablist" class="tabs__button" :class="{ '-selected': tab.selected }" role="tab" :aria-selected="tab.selected" :aria-controls="tab.panelId" :tabindex="tab.tabindex" v-text="tab.title" />
       <button class="tabs__next button -circle" @click="next">
         <span class="srOnly">next</span>
         <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
       </button>
     </div>
 
-    <div class="tabs__panel" v-for="tab in tabs" role="tabpanel" :tabindex="tab.tabindex" :id="tab.panelId" :aria-labelledby="tab.buttonId" :hidden="!tab.selected">
+    <div v-for="tab in tabs" :id="tab.panelId" :key="tab.panelId" class="tabs__panel" role="tabpanel" :tabindex="tab.tabindex" :aria-labelledby="tab.buttonId" :hidden="!tab.selected">
       <slot :name="tab.panelId" />
     </div>
   </div>
diff --git a/resources/js/components/PWistia.vue b/resources/js/components/PWistia.vue
index 662293c..6652cf0 100644
--- a/resources/js/components/PWistia.vue
+++ b/resources/js/components/PWistia.vue
@@ -24,7 +24,9 @@ const playPause = () => {
 </script>
 
 <template>
-  <div ref="video"><slot name="default" /></div>
+  <div ref="video">
+    <slot name="default" />
+  </div>
   <slot name="placeholder" v-bind="{ playPause, loaded, modifier }">
     <button @click="playPause">play</button>
   </slot>
diff --git a/resources/js/components/PYouTube.vue b/resources/js/components/PYouTube.vue
index 4335bd0..fc327e4 100644
--- a/resources/js/components/PYouTube.vue
+++ b/resources/js/components/PYouTube.vue
@@ -7,7 +7,7 @@ window.onYouTubeIframeAPIReady = () => (YT_API_LOADED.value = true)
 </script>
 
 <script setup>
-import { computed, onMounted, ref, useTemplateRef, watchEffect } from 'vue'
+import { computed, onMounted, watchEffect } from 'vue'
 
 let player = null
 const mediaEl = useTemplateRef('video')
@@ -24,7 +24,7 @@ if (typeof window?.YT?.Player === 'undefined') {
 onMounted(() => (mounted.value = true))
 watchEffect(() => {
   if (mounted.value && YT_API_LOADED.value) {
-    player = new YT.Player(mediaEl.value.querySelector('iframe'))
+    player = new window.YT.Player(mediaEl.value.querySelector('iframe'))
   }
 })
 
@@ -45,7 +45,9 @@ const playPause = () => {
 </script>
 
 <template>
-  <div ref="video"><slot name="default" /></div>
+  <div ref="video">
+    <slot name="default" />
+  </div>
   <slot name="placeholder" v-bind="{ playPause, loaded, modifier }">
     <button @click="playPause">play</button>
   </slot>
diff --git a/resources/js/composables/FocusableElements.js b/resources/js/composables/FocusableElements.js
index fc2c048..e469666 100644
--- a/resources/js/composables/FocusableElements.js
+++ b/resources/js/composables/FocusableElements.js
@@ -1,6 +1,6 @@
 import { toValue } from 'vue'
 
-const FOCUSABLE_SELECTOR = `:not([tabindex^="-"]):not([disabled]):is(a[href],audio[controls],button,details summary,input,map area[href],select,svg a[xlink\:href],[tabindex],textarea,video[controls])`
+const FOCUSABLE_SELECTOR = ':not([tabindex^="-"]):not([disabled]):is(a[href],audio[controls],button,details summary,input,map area[href],select,svg a[xlink:href],[tabindex],textarea,video[controls])'
 
 export default function focusableElements(element, includeSelf = true) {
   element = toValue(element)
diff --git a/resources/js/composables/UseDirectionalKeys.js b/resources/js/composables/UseDirectionalKeys.js
index 7347392..fc373cb 100644
--- a/resources/js/composables/UseDirectionalKeys.js
+++ b/resources/js/composables/UseDirectionalKeys.js
@@ -1,5 +1,3 @@
-import { toValue, onMounted } from 'vue'
-
 import focusableElements from './FocusableElements.js'
 
 /**

From fa4b2404b7f35c6089a6319843c9ae1723dd6f98 Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Thu, 5 Feb 2026 13:07:03 -0500
Subject: [PATCH 05/11] add lint and lint:fix to npm run

---
 package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2fe3762..19842b6 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,9 @@
     "dev": "vite",
     "prod": "vite build",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "prettier -c \"resources/**/*.{js,vue,scss,css,md}\" && eslint \"resources/js/**/*.{js,vue}\" && stylelint \"resources/**/*.scss\"",
+    "lint:fix": "prettier -w \"resources/**/*.{js,vue,scss,css,md}\" && eslint \"resources/js/**/*.{js,vue}\" && stylelint \"resources/**/*.scss\""
   },
   "dependencies": {
     "@clack/prompts": "^0.9.1",

From bb2b9b28a6bb5251fad3919d98c7917fe8ba708d Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Thu, 5 Feb 2026 13:30:05 -0500
Subject: [PATCH 06/11] remove empty <li>s

---
 resources/styles/atoms/dropdown/dropdown.html            | 1 -
 .../molecules/navigation/navigation-hoverable.html       | 6 ------
 resources/styles/molecules/navigation/navigation.html    | 9 ---------
 3 files changed, 16 deletions(-)

diff --git a/resources/styles/atoms/dropdown/dropdown.html b/resources/styles/atoms/dropdown/dropdown.html
index fad6534..a91f609 100644
--- a/resources/styles/atoms/dropdown/dropdown.html
+++ b/resources/styles/atoms/dropdown/dropdown.html
@@ -10,7 +10,6 @@
         <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
         <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
         <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
-        <li></li>
       </ul>
     </div>
   </template>
diff --git a/resources/styles/molecules/navigation/navigation-hoverable.html b/resources/styles/molecules/navigation/navigation-hoverable.html
index 9000e64..2375f4c 100644
--- a/resources/styles/molecules/navigation/navigation-hoverable.html
+++ b/resources/styles/molecules/navigation/navigation-hoverable.html
@@ -17,7 +17,6 @@
               <li>
                 <a href=""><span>Ipsum dolorem</span></a>
               </li>
-              <li></li>
             </ul>
           </div>
         </template>
@@ -40,7 +39,6 @@
               <li>
                 <a href=""><span>Ipsum dolorem</span></a>
               </li>
-              <li></li>
             </ul>
           </div>
         </template>
@@ -66,7 +64,6 @@ <h3>Heading</h3>
                 <li>
                   <a href=""><span>Ipsum dolorem</span></a>
                 </li>
-                <li></li>
               </ul>
             </div>
             <div class="cell">
@@ -85,7 +82,6 @@ <h3>Heading</h3>
                 <li>
                   <a href=""><span>Ipsum dolorem</span></a>
                 </li>
-                <li></li>
               </ul>
             </div>
             <div class="cell">
@@ -104,7 +100,6 @@ <h3>Heading</h3>
                 <li>
                   <a href=""><span>Ipsum dolorem</span></a>
                 </li>
-                <li></li>
               </ul>
             </div>
           </div>
@@ -128,7 +123,6 @@ <h3>Heading</h3>
               <li>
                 <a href=""><span>Ipsum dolorem</span></a>
               </li>
-              <li></li>
             </ul>
           </div>
         </template>
diff --git a/resources/styles/molecules/navigation/navigation.html b/resources/styles/molecules/navigation/navigation.html
index bccbc6a..20dabe7 100644
--- a/resources/styles/molecules/navigation/navigation.html
+++ b/resources/styles/molecules/navigation/navigation.html
@@ -22,7 +22,6 @@
                           <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                           <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
                           <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
-                          <li></li>
                         </ul>
                       </div>
                     </template>
@@ -30,7 +29,6 @@
                 </li>
                 <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
                 <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
-                <li></li>
               </ul>
             </div>
             <div class="cell -span-2">
@@ -51,7 +49,6 @@
                           <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                           <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
                           <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
-                          <li></li>
                         </ul>
                       </div>
                     </template>
@@ -59,7 +56,6 @@
                 </li>
                 <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
                 <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
-                <li></li>
               </ul>
             </div>
             <div class="cell -span-3">
@@ -91,7 +87,6 @@
               <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
               <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
               <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
-              <li></li>
             </ul>
           </div>
         </template>
@@ -110,7 +105,6 @@ <h3>Heading</h3>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
-                  <li></li>
                 </ul>
               </div>
               <div class="cell">
@@ -121,7 +115,6 @@ <h3>Heading</h3>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
-                  <li></li>
                 </ul>
               </div>
               <div class="cell">
@@ -132,7 +125,6 @@ <h3>Heading</h3>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
                   <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
-                  <li></li>
                 </ul>
               </div>
             </div>
@@ -149,7 +141,6 @@ <h3>Heading</h3>
               <li class="dropdown__item"><a href="" class="dropdown__link">Consectetur asperiores</a></li>
               <li class="dropdown__item"><a href="" class="dropdown__link">Amet porro.</a></li>
               <li class="dropdown__item"><a href="" class="dropdown__link">Ipsum dolorem</a></li>
-              <li></li>
             </ul>
           </div>
         </template>

From 71689cfeacf7be0685cc6ef34b728652407625ee Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Thu, 5 Feb 2026 16:28:05 -0500
Subject: [PATCH 07/11] fix formatting of style attribute

---
 resources/_preview.html | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/resources/_preview.html b/resources/_preview.html
index 89b06e6..5514bd6 100644
--- a/resources/_preview.html
+++ b/resources/_preview.html
@@ -9,11 +9,7 @@
   <body>
     <div
       id="app"
-      style="
-        $ {
-          component.url?.match(/atoms|molecules/)?'padding: 2rem': '';
-        }
-      "
+      style="${component.url?.match(/atoms|molecules/)?'padding: 2rem':''}"
     >
       ${code}
     </div>

From bdc9ffb5070e2e47281da2bb3e8ba5b939bf9aca Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Thu, 5 Feb 2026 16:29:09 -0500
Subject: [PATCH 08/11] update doc

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index 6b252a3..0dae163 100644
--- a/README.md
+++ b/README.md
@@ -33,3 +33,10 @@ The recommended way to work on Pronto is to work within Vitrine after cloning Pr
 1. Clone Pronto to a folder of your choosing.
 2. Within that folder, run `npm install` and `npm run dev`.
 3. Make sure to check any functional changes to Vitrine or Pronto also work properly with the build step `npm run prod` as well.
+
+#### Formatting and linting
+
+Formatting is handled by Prettier, while ESLint and Stylelint focus on linting. Use these commands during development:
+
+- `npm run lint` checks Prettier formatting without making changes, then runs ESLint and Stylelint.
+- `npm run lint:fix` tries to fix the code to match Prettier formatting, then runs ESLint and Stylelint.

From de3a72adeda5b3ec524660d77dcae60042de8ddf Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Fri, 6 Feb 2026 10:50:24 -0500
Subject: [PATCH 09/11] fix linting

---
 package.json                            | 2 +-
 resources/styles/core/accentColors.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 19842b6..1036257 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "prettier -c \"resources/**/*.{js,vue,scss,css,md}\" && eslint \"resources/js/**/*.{js,vue}\" && stylelint \"resources/**/*.scss\"",
-    "lint:fix": "prettier -w \"resources/**/*.{js,vue,scss,css,md}\" && eslint \"resources/js/**/*.{js,vue}\" && stylelint \"resources/**/*.scss\""
+    "lint:fix": "prettier -w \"resources/**/*.{js,vue,scss,css,md}\" && eslint \"resources/js/**/*.{js,vue}\" && stylelint \"resources/**/*.scss\" --fix"
   },
   "dependencies": {
     "@clack/prompts": "^0.9.1",
diff --git a/resources/styles/core/accentColors.scss b/resources/styles/core/accentColors.scss
index f5f30b8..f1c4ff9 100644
--- a/resources/styles/core/accentColors.scss
+++ b/resources/styles/core/accentColors.scss
@@ -19,7 +19,7 @@
    * with the accent color. This uses CIELAB perceptual lightness to approximate
    * contrast and more closely matches APCA than WCAG.
    */
-  --accent-color-contrast: oklch(from var(--accent-color) round(1.21 - L) 0 0);
+  --accent-color-contrast: oklch(from var(--accent-color) round(1.21 - l) 0 0deg);
 
   /**
    * This variable based on AccentColorText is either var(--accent-color-dark)

From 3bddc25b8ed7dcc2bc58d98afbcfefa72ad1bf92 Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Mon, 9 Feb 2026 14:31:14 -0500
Subject: [PATCH 10/11] set minimum node version = 24

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index 1036257..03e2444 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,9 @@
     "lint": "prettier -c \"resources/**/*.{js,vue,scss,css,md}\" && eslint \"resources/js/**/*.{js,vue}\" && stylelint \"resources/**/*.scss\"",
     "lint:fix": "prettier -w \"resources/**/*.{js,vue,scss,css,md}\" && eslint \"resources/js/**/*.{js,vue}\" && stylelint \"resources/**/*.scss\" --fix"
   },
+  "engines": {
+      "node": ">=24"
+  },
   "dependencies": {
     "@clack/prompts": "^0.9.1",
     "@imarc/vitrine": "^1.2.1",

From cecfd2658def23e14f74aaaf0c9806e5de51082a Mon Sep 17 00:00:00 2001
From: Kevin Hamer <kevin@imarc.com>
Date: Mon, 9 Feb 2026 14:39:33 -0500
Subject: [PATCH 11/11] 2.1.0-beta.0

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 03e2444..f26706a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@imarc/pronto",
-  "version": "2.0.4",
+  "version": "2.1.0-beta.0",
   "description": "A light, customizable frontend starter kit for the component library",
   "author": "Imarc",
   "license": "Apache-2.0",
@@ -24,7 +24,7 @@
     "lint:fix": "prettier -w \"resources/**/*.{js,vue,scss,css,md}\" && eslint \"resources/js/**/*.{js,vue}\" && stylelint \"resources/**/*.scss\" --fix"
   },
   "engines": {
-      "node": ">=24"
+    "node": ">=24"
   },
   "dependencies": {
     "@clack/prompts": "^0.9.1",