From 35ea2c3921e109804455335654c0f86a4ee26a8f Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 10 Jul 2025 16:16:40 -0500
Subject: [PATCH] Use vw units for main padding

---
 app/assets/stylesheets/card-perma.css | 6 +-----
 app/assets/stylesheets/layout.css     | 4 +++-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 13933d9da..d9592df61 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -58,7 +58,7 @@
     }
 
     @media (max-width: 800px) {
-      --padding-inline: 3cqmin;
+      --padding-inline: var(--main-padding);
 
       column-gap: 0;
       grid-template-areas:
@@ -156,10 +156,6 @@
         --btn-color: var(--color-ink-inverted);
       }
     }
-
-    @media (max-width: 580px) {
-      margin-block-start: -2ch;
-    }
   }
 
   .card-perma__notch--bottom {
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index 40de97e09..ab65b2f10 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -9,10 +9,12 @@
   }
 
   :where(#main) {
+    --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
+
     inline-size: 100dvw;
     margin-inline: auto;
     max-inline-size: 100dvw;
-    padding-inline: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3));
+    padding-inline: var(--main-padding);
     text-align: center;
 
     @media print {