5 files changed, 44 insertions, 33 deletions
diff --git a/public/css/modules/index.css b/public/css/modules/index.css
index 800a920..56ba45e 100644
--- a/public/css/modules/index.css
+++ b/public/css/modules/index.css
@@ -6,7 +6,9 @@
 @import './schedule.css';
 @import './schedule.md.css' (min-width: 48rem);
 @import './link-gallery.css';
+@import './link-gallery.xs.css' (min-width: 16rem);
 @import './nav.css';
+@import './nav.xs.css' (min-width: 16rem);
 @import './nav.md.css' (min-width: 48rem);
 @import './nav.lg.css' (min-width: 64rem);
 @import './skip-to-content.css';
diff --git a/public/css/modules/link-gallery.css b/public/css/modules/link-gallery.css
index acb77e2..12ba16f 100644
--- a/public/css/modules/link-gallery.css
+++ b/public/css/modules/link-gallery.css
@@ -1,16 +1,11 @@
 .link-gallery {
   display: grid;
   grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
-  grid-auto-rows: calc(
-    var(--gallery-row-image-height) +
-    var(--margin-block-sm) +
-    var(--gallery-row-title-height)
-  );
   gap: var(--grid-gutter-width);
   padding-block: var(--margin-block-md);
-  --gallery-item-column-span: 2;
+  --gallery-item-column-span: 1;
   --gallery-row-image-height: 12rem;
-  --gallery-row-title-height: 11ex;
+  --gallery-row-title-height: fit-content;
   text-align: center;
 }
 
@@ -38,12 +33,6 @@
 .link-gallery__title {
   width: 100%;
   height: min-content;
-  max-height: 100%;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
   text-align: center;
   margin-inline: var(--spacing-inline-xs);
 }
diff --git a/public/css/modules/link-gallery.xs.css b/public/css/modules/link-gallery.xs.css
new file mode 100644
index 0000000..729ff01
--- /dev/null
+++ b/public/css/modules/link-gallery.xs.css
@@ -0,0 +1,21 @@
+.link-gallery {
+  grid-auto-rows: calc(
+    var(--gallery-row-image-height) +
+    var(--margin-block-sm) +
+    var(--gallery-row-title-height)
+  );
+  --gallery-item-column-span: 2;
+  --gallery-row-title-height: 11ex;
+  text-align: center;
+}
+
+.link-gallery__title {
+  width: 100%;
+  height: min-content;
+  max-height: 100%;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
diff --git a/public/css/modules/nav.css b/public/css/modules/nav.css
index 6af1c77..bd41dbc 100644
--- a/public/css/modules/nav.css
+++ b/public/css/modules/nav.css
@@ -17,26 +17,6 @@
   margin: 0;
 }
 
-.nav__nav-links li:nth-child(1) {
-  grid-column: 1 / 3;
-}
-
-.nav__nav-links li:nth-child(2) {
-  grid-column: 3 / 5;
-}
-
-.nav__nav-links li:nth-child(3) {
-  grid-column: 1 / 4;
-}
-
-.nav__nav-links li:nth-child(4) {
-  grid-column: 1 / 3;
-}
-
-.nav__nav-links li:nth-child(5) {
-  grid-column: 3 / 5;
-}
-
 .nav__logo {
   font-family: var(--font-serif);
   font-size: var(--font-size-5);
diff --git a/public/css/modules/nav.xs.css b/public/css/modules/nav.xs.css
new file mode 100644
index 0000000..708652c
--- /dev/null
+++ b/public/css/modules/nav.xs.css
@@ -0,0 +1,19 @@
+.nav__nav-links li:nth-child(1) {
+  grid-column: 1 / 3;
+}
+
+.nav__nav-links li:nth-child(2) {
+  grid-column: 3 / 5;
+}
+
+.nav__nav-links li:nth-child(3) {
+  grid-column: 1 / 4;
+}
+
+.nav__nav-links li:nth-child(4) {
+  grid-column: 1 / 3;
+}
+
+.nav__nav-links li:nth-child(5) {
+  grid-column: 3 / 5;
+}