Better responsive, grid-aligned Schedule layout

3 files changed, 17 insertions, 17 deletions

diff --git a/public/css/modules/index.css b/public/css/modules/index.css
index 618e4ca..800a920 100644
--- a/public/css/modules/index.css
+++ b/public/css/modules/index.css
@@ -4,7 +4,7 @@
 @import './back-to-top.css';
 @import './product.css';
 @import './schedule.css';
-@import './schedule.lg.css' (min-width: 35rem);
+@import './schedule.md.css' (min-width: 48rem);
 @import './link-gallery.css';
 @import './nav.css';
 @import './nav.md.css' (min-width: 48rem);
diff --git a/public/css/modules/schedule.lg.css b/public/css/modules/schedule.lg.css
deleted file mode 100644
index e285a8a..0000000
--- a/public/css/modules/schedule.lg.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.schedule {
-  display: grid;
-  grid-template-columns: fit-content(5rem) 1fr;
-  column-gap: var(--margin-inline-md);
-}
-
-.schedule dt {
-  grid-column-start: 1;
-  margin: 0;
-  text-align: end;
-}
-
-.schedule dd {
-  grid-column-start: 2;
-  text-align: start;
-}
diff --git a/public/css/modules/schedule.md.css b/public/css/modules/schedule.md.css
new file mode 100644
index 0000000..9ccfb0b
--- /dev/null
+++ b/public/css/modules/schedule.md.css
@@ -0,0 +1,16 @@
+.schedule {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+  column-gap: var(--grid-gutter-width);
+}
+
+.schedule dt {
+  grid-column: 1 / 3;
+  margin: 0;
+  text-align: end;
+}
+
+.schedule dd {
+  grid-column: 3 / calc(1 + var(--grid-prose-column-count));
+  text-align: start;
+}