Ensure sign-in screens adapt on mobile

app/assets/stylesheets/panels.css

@@ -6,7 +6,11 @@
     color: var(--color-ink);
     inline-size: var(--panel-size, 60ch);
     max-inline-size: 100%;
-    padding: var(--panel-padding, calc(var(--block-space) * 2));
+    padding: var(--panel-padding, var(--block-space));
+
+    @media (min-width: 640px) {
+      padding: var(--panel-padding, var(--block-space-double));
+    }
   }
 
   .panel--centered {

app/views/sessions/_footer.html.erb

@@ -1,4 +1,4 @@
-<div class="txt-align-center center margin-block-double txt-subtle txt-small">
+<div class="pad-inline txt-align-center center margin-block-double txt-subtle txt-small">
   <strong><%= link_to "Fizzy", "https://www.fizzy.do", class: "txt-subtle" %></strong> is designed, built, and backed by <strong class="txt-nowrap"><%= icon_tag "37signals", class: "v-align-middle" %> <a href="https://37signals.com" target="_blank" class="txt-subtle">37signals</a></strong>.
   Need help? <%= mail_to "support@fizzy.do", "Send us an email", class: "txt-link" %>
 </div>

app/views/sessions/new.html.erb

@@ -1,6 +1,6 @@
 <% @page_title = "Enter your email" %>
 
-<div class="panel panel--centered flex flex-column gap-half" style="--panel-size: 65ch;">
+<div class="panel panel--centered flex flex-column gap-half">
   <h1 class="txt-x-large font-weight-black margin-block-end">Let’s get you in to Fizzy</h1>
 
   <%= form_with url: session_path, class: "flex flex-column gap txt-medium" do |form| %>