14 files changed, 136 insertions, 42 deletions
diff --git a/scss/modules/btn.scss b/scss/modules/btn.scss
index e9db392..6b5e543 100644
--- a/scss/modules/btn.scss
+++ b/scss/modules/btn.scss
@@ -1,11 +1,11 @@
 .btn {
   display: block;
-  border: solid var(--relative-eighth-rem) var(--text-color);
+  border: solid var(--border-width) var(--text-color);
   font-weight: 600;
   text-align: center;
-  margin-block-start: var(--margin-block-sm);
-  padding-inline: var(--padding-inline-md);
-  padding-block: var(--padding-block-sm);
+  margin-block-start: var(--spacing-block-sm);
+  padding-inline: var(--spacing-inline-md);
+  padding-block: var(--spacing-block-sm);
   background-color: transparent;
   transition:
     background-color 100ms,
diff --git a/scss/modules/committee.scss b/scss/modules/committee.scss
index 2badf57..f6528a3 100644
--- a/scss/modules/committee.scss
+++ b/scss/modules/committee.scss
@@ -1,10 +1,37 @@
 .committee__member {
   list-style-type: none;
-  margin-block-start: var(--margin-block-sm);
+  margin-block-start: var(--spacing-block-sm);
+}
+
+.committee__member + .committee__member {
+  border-top-width: var(--border-width);
+  border-top-style: solid;
+  border-image: linear-gradient(
+    to right,
+    transparent 0%,
+    transparent 19.1%,
+    var(--text-color) 19.1%,
+    var(--text-color) 80.9%,
+    transparent 80.9%,
+    transparent 100%
+  ) 1;
+  margin-block-start: var(--spacing-block-md);
+  padding-block-start: var(--spacing-block-md);
 }
 
 .committee__member__img {
-  margin-inline: calc(var(--grid-column-width) + var(--grid-gutter-width));
-  width: calc(var(--grid-gutter-width) + 2 * var(--grid-column-width));
+  margin-inline: 25%;
+  width: 50%;
   border-radius: 50%;
 }
+
+.committee__member__text {
+  text-align: center;
+  margin-block-start: var(--spacing-block-sm);
+}
+
+.committee__member__role {
+  display: block;
+  font-weight: lighter;
+}
+
diff --git a/scss/modules/committee.sm.scss b/scss/modules/committee.sm.scss
new file mode 100644
index 0000000..a2b2216
--- /dev/null
+++ b/scss/modules/committee.sm.scss
@@ -0,0 +1,5 @@
+.committee__member__text {
+  text-align: start;
+  margin: 0;
+}
+
diff --git a/scss/modules/committee.xs.scss b/scss/modules/committee.xs.scss
new file mode 100644
index 0000000..5681bc7
--- /dev/null
+++ b/scss/modules/committee.xs.scss
@@ -0,0 +1,5 @@
+.committee__member__img {
+  margin-inline: calc(var(--grid-column-width) + var(--grid-gutter-width));
+  width: calc(var(--grid-gutter-width) + 2 * var(--grid-column-width));
+}
+
diff --git a/scss/modules/footer.scss b/scss/modules/footer.scss
index 0d1a896..9210044 100644
--- a/scss/modules/footer.scss
+++ b/scss/modules/footer.scss
@@ -1,8 +1,8 @@
 footer {
-  display: grid;
-  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
-  gap: var(--grid-gutter-width);
-  align-items: baseline;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-block-sm);
+  align-items: center;
 }
 
 .footer__rss-button__label {
@@ -19,10 +19,10 @@ footer {
 }
 
 .footer__rss-button__img {
-  min-width: 44px;
-  width: calc(8 * var(--relative-eighth-rem));
+  display: block;
 }
 
 .footer__back-to-top {
   grid-column: calc(var(--grid-column-count) - 2) / calc(var(--grid-column-count) + 1);
-}
-\ No newline at end of file
+  margin: 0;
+}
diff --git a/scss/modules/footer.xs.scss b/scss/modules/footer.xs.scss
new file mode 100644
index 0000000..67cab7f
--- /dev/null
+++ b/scss/modules/footer.xs.scss
@@ -0,0 +1,7 @@
+footer {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+  gap: var(--grid-gutter-width);
+  align-items: end;
+}
+
diff --git a/scss/modules/index.sm.scss b/scss/modules/index.sm.scss
new file mode 100644
index 0000000..a4fb988
--- /dev/null
+++ b/scss/modules/index.sm.scss
@@ -0,0 +1,3 @@
+@use 'committee.sm' as *;
+@use 'nav.sm' as *;
+
diff --git a/scss/modules/index.xs.scss b/scss/modules/index.xs.scss
index 9dd43c5..ef77c6d 100644
--- a/scss/modules/index.xs.scss
+++ b/scss/modules/index.xs.scss
@@ -1,3 +1,5 @@
+@use 'committee.xs' as *;
+@use 'footer.xs' as *;
 @use 'link-gallery.xs' as *;
 @use 'nav.xs' as *;
 
diff --git a/scss/modules/link-gallery.scss b/scss/modules/link-gallery.scss
index 56949e2..d321419 100644
--- a/scss/modules/link-gallery.scss
+++ b/scss/modules/link-gallery.scss
@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
   gap: var(--grid-gutter-width);
-  padding-block: var(--margin-block-md);
+  padding-block: var(--spacing-block-md);
   --gallery-item-column-span: 1;
   --gallery-row-image-height: 12rem;
   --gallery-row-title-height: fit-content;
@@ -25,13 +25,13 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: var(--gallery-row-image-height) var(--gallery-row-title-height);
-  row-gap: var(--margin-block-sm);
+  row-gap: var(--spacing-block-sm);
 }
 
 .link-gallery--furthsettins img {
   box-sizing: border-box;
   border-radius: 50%;
-  border: solid calc(2 * var(--relative-eighth-rem)) var(--text-color);
+  border: solid var(--border-width) var(--text-color);
 }
 
 .link-gallery__title {
diff --git a/scss/modules/link.scss b/scss/modules/link.scss
index 83206d4..2f827c4 100644
--- a/scss/modules/link.scss
+++ b/scss/modules/link.scss
@@ -2,23 +2,19 @@ a, .link {
   color: var(--special-text-color);
   text-decoration-line: underline;
   text-decoration-color: var(--special-text-color);
-  text-decoration-thickness: var(--relative-eighth-rem);
-  text-underline-offset: var(--relative-eighth-rem);
-  border: dotted transparent var(--relative-eighth-rem);
+  border: dotted transparent var(--border-width);
   transition:
     color 100ms,
     text-decoration-color 100ms,
-    text-decoration-thickness 100ms,
     border-color 100ms;
 
   &:is(:hover, :focus, :focus-visible, :focus-within),
   .group-hover:is(:hover, :focus, :focus-visible, :focus-within) & {
     text-decoration-color: currentColor;
-    text-decoration-thickness: calc(3 * var(--relative-eighth-rem));
+    text-decoration-style: wavy;
     transition:
       color 300ms,
       text-decoration-color 300ms,
-      text-decoration-thickness 300ms,
       border-color 300ms;
   }
 
diff --git a/scss/modules/nav.md.scss b/scss/modules/nav.md.scss
index c3f4a18..7f0f784 100644
--- a/scss/modules/nav.md.scss
+++ b/scss/modules/nav.md.scss
@@ -1,11 +1,26 @@
-.nav__nav-links li:nth-child(3) {
-  grid-column: 5 / 8;
+.nav__nav-links li {
+  &:nth-child(1) {
+    grid-column: 1 / 3;
+  }
+
+  &:nth-child(2) {
+    grid-column: 3 / 5;
+  }
+
+  &:nth-child(3) {
+    grid-column: 5 / 8;
+  }
+
+  &:nth-child(4) {
+    grid-column: 1 / 3;
+  }
+
+  &:nth-child(5) {
+    grid-column: 3 / 5;
+  }
 }
 
-.nav__nav-links li:nth-child(4) {
-  grid-column: 1 / 3;
+.nav__switch-language-link {
+  margin-inline-end: calc(var(--grid-column-width) + var(--grid-gutter-width));
 }
 
-.nav__nav-links li:nth-child(5) {
-  grid-column: 3 / 5;
-}
-\ No newline at end of file
diff --git a/scss/modules/nav.scss b/scss/modules/nav.scss
index 765c44f..f2f32a9 100644
--- a/scss/modules/nav.scss
+++ b/scss/modules/nav.scss
@@ -28,9 +28,10 @@
   font-family: var(--font-serif);
   font-size: var(--font-size-5);
   font-weight: 700;
+  line-height: 1.15;
 
   /* This gradient is based on                  *
-   * --color-primary-60 -> --color-secondary-60 *
+   * colours.$primary-60 -> colours.$secondary-60 *
    * using Josh W Comeau's gradient generator   */
   width: fit-content;
   background-image: linear-gradient(
@@ -53,7 +54,7 @@
 
   a {
     text-decoration: none;
-    border: var(--relative-eighth-rem) dotted transparent;
+    border: var(--border-width) dotted transparent;
     transition: border-color 100ms;
 
     &:is(:focus, :focus-visible, :focus-within) {
@@ -66,14 +67,9 @@
 }
 
 .nav__breadcrumbs {
-  display: flex;
-  flex-wrap: wrap;
-
   li {
-    min-width: max-content;
-    &::before {
-      content: '/'
-    }
+    list-style: '▸';
+    list-style-position: inside;
   }
 }
 
diff --git a/scss/modules/nav.sm.scss b/scss/modules/nav.sm.scss
new file mode 100644
index 0000000..db540bd
--- /dev/null
+++ b/scss/modules/nav.sm.scss
@@ -0,0 +1,38 @@
+.nav__breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+
+  li {
+    display: inline;
+    min-width: max-content;
+
+    + li::before {
+      content: '/';
+      margin-inline: var(--margin-inline-md);
+    }
+  }
+}
+
+.nav__nav-links li {
+  &:nth-child(1) {
+    grid-column: 1 / 3;
+  }
+
+  &:nth-child(2) {
+    grid-column: 3 / 6;
+  }
+
+  &:nth-child(3) {
+    grid-column: 6 / 9;
+  }
+
+  &:nth-child(4) {
+    grid-column: 1 / 3;
+  }
+
+  &:nth-child(5) {
+    grid-column: 3 / 5;
+  }
+}
+
diff --git a/scss/modules/news-index.scss b/scss/modules/news-index.scss
index 5d9bab2..b235edd 100644
--- a/scss/modules/news-index.scss
+++ b/scss/modules/news-index.scss
@@ -1,10 +1,10 @@
 .news-index__item {
   display: block;
   box-sizing: border-box;
-  border: var(--relative-eighth-rem) solid var(--text-color);
+  border: var(--border-width) solid var(--text-color);
   transition: background 100ms;
-  padding-block: var(--margin-block-md);
-  padding-inline: var(--padding-inline-sm);
+  padding-block: var(--spacing-block-md);
+  padding-inline: var(--spacing-inline-sm);
   width: var(--width-prose);
 }