From 0128568e2221f1d0d5df9fe3a1ab6e5911c0655a Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Sat, 26 Aug 2023 08:24:35 +0100
Subject: Adds xs breakpoint

---
 public/css/layout/grid.css | 54 ++++------------------------------------------
 1 file changed, 4 insertions(+), 50 deletions(-)

(limited to 'public/css/layout/grid.css')

diff --git a/public/css/layout/grid.css b/public/css/layout/grid.css
index a4fb251..25cdd95 100644
--- a/public/css/layout/grid.css
+++ b/public/css/layout/grid.css
@@ -11,12 +11,14 @@
   width: var(--grid-column-width);
 }
 
+/* On screens narrower than 16rem, there is only one column. */
+
 .grid-span-2 {
-  width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width));
+  width: var(--grid-column-width);
 }
 
 .grid-span-3 {
-  width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2);
+  width: var(--grid-column-width);
 }
 
 .width-prose {
@@ -26,51 +28,3 @@
 .grid-span-full {
   width: var(--grid-total-width);
 }
-
-.grid-span-1.grid-end {
-  margin-inline-start: calc(
-    var(--grid-column-width) * (var(--grid-column-count) - 1) +
-    var(--grid-gutter-width) * (var(--grid-column-count) - 1)
-  );
-  margin-inline-end: 0;
-}
-
-.grid-span-2.grid-end {
-  margin-inline-start: calc(
-    var(--grid-column-width) * (var(--grid-column-count) - 2) +
-    var(--grid-gutter-width) * (var(--grid-column-count) - 2)
-  );
-  margin-inline-end: 0;
-}
-
-.grid-span-3.grid-end {
-  margin-inline-start: calc(
-    var(--grid-column-width) * (var(--grid-column-count) - 3) +
-    var(--grid-gutter-width) * (var(--grid-column-count) - 3)
-  );
-  margin-inline-end: 0;
-}
-
-.grid-span-1.grid-prose-end {
-  margin-inline-start: calc(
-    var(--grid-column-width) * (var(--grid-prose-column-count) - 1) +
-    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
-  );
-  margin-inline-end: 0;
-}
-
-.grid-span-2.grid-prose-end {
-  margin-inline-start: calc(
-    var(--grid-column-width) * (var(--grid-prose-column-count) - 2) +
-    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 2)
-  );
-  margin-inline-end: 0;
-}
-
-.grid-span-3.grid-prose-end {
-  margin-inline-start: calc(
-    var(--grid-column-width) * (var(--grid-prose-column-count) - 3) +
-    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 3)
-  );
-  margin-inline-end: 0;
-}
\ No newline at end of file
-- 
cgit v1.2.3