design subscribe form to be mobile first

components/pages/posts/[slug]/SubscribeForm.tsx

@@ -16,7 +16,7 @@ export function SubscribeForm(): JSX.Element {
   const [formState, setFormState] = useState(initialState)
   return (
     <form
-      className="card mx-auto flex flex-col gap-4 bg-surface-base-elevation-100 text-on-surface-base"
+      className="mx-auto flex flex-col gap-8 text-on-surface-base"
       onSubmit={async e => {
         e.preventDefault()
         const email = e.currentTarget.email.value
@@ -37,13 +37,13 @@ export function SubscribeForm(): JSX.Element {
         })
       }}
     >
-      <h2 className="text-xl">
+      <h3 className="text-xl">
         Subscribe to receive more like this in your inbox.
-      </h2>
+      </h3>
       <p className="text-on-surface-base-muted">
         No spam <span className="italic">ever.</span>
       </p>
-      <div className="mx-auto flex gap-4">
+      <div className="mx-auto flex flex-col justify-center gap-4 md:flex-row">
         <label htmlFor="email" className="sr-only">
           Email
         </label>
@@ -54,7 +54,7 @@ export function SubscribeForm(): JSX.Element {
           className="overflow-hidden rounded-md border border-borderColor bg-surface-base px-3 py-2 text-left text-sm shadow-sm focus:border-borderColor-focus focus:outline-none focus:ring-1 focus:ring-ringColor-focus"
           placeholder="Enter your email"
         />
-        <button className="rounded-md bg-accent-400 px-3 py-2 text-sm text-on-surface-accent shadow-sm hover:bg-surface-accent-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-accent">
+        <button className="rounded-md bg-accent-400 px-3 py-2 text-on-surface-accent shadow-sm hover:bg-surface-accent-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-accent">
           Subscribe
         </button>
       </div>