responsiveness

app/page.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 
 export default function Home() {
   return (
-    <section className="min-h-screen p-12 lg:p-24 bg-stone-950">
+    <section className="min-h-screen p-12 lg:p-24 bg-stone-950 relative z-[1]">
       <Form>
         <header>
           <h1 className="text-white font-bold text-3xl">
@@ -14,6 +14,7 @@ export default function Home() {
           </h2>
         </header>
       </Form>
+      <div className="w-[400px] h-[400px] bg-gradient-to-br from-amber-300 to-amber-600 absolute left-0 top-0 -z-[1] blur-[230px]" />
     </section>
   );
 }

components/form.tsx

@@ -129,10 +129,8 @@ export const Form = ({ children }: { children: React.ReactNode }) => {
     setStatusText("Done!");
   };
 
-  console.log("track is", track);
-
   return (
-    <main className="grid grid-cols-2 gap-20">
+    <main className="grid grid-cols-1 gap-20 lg:grid-cols-2 lg:gap-20">
       <div className="grid grid-cols-1 gap-10">
         {children}
         <Prompt

components/moods.tsx

@@ -16,7 +16,7 @@ export const Moods = ({
   return (
     <div>
       <p className="text-white font-semibold text-base mb-4">Select a mood</p>
-      <div className="grid grid-cols-4 gap-2 relative z-[1]">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 relative z-[1]">
         {MOODS.slice(viewAll ? 0 : 0, viewAll ? MOODS.length : 12).map(
           (style) => {
             return (

components/styles.tsx

@@ -16,13 +16,13 @@ export const Styles = ({
   return (
     <div>
       <p className="text-white font-semibold text-base mb-4">Select a style</p>
-      <div className="grid grid-cols-3 gap-2 relative z-[1]">
+      <div className="grid grid-cols-2 lg:grid-cols-3 gap-2 relative z-[1]">
         {STYLES.slice(viewAll ? 0 : 0, viewAll ? STYLES.length : 9).map(
           (style) => (
             <div
               key={style.label}
               className={classNames(
-                "w-full cursor-pointer transition-all duration-200 opacity-40 hover:opacity-100 rounded-xl bg-cover bg-center relative px-5 py-8 bg-gray-700 text-center font-bold text-white text-xl z-[1] overflow-hidden",
+                "w-full cursor-pointer transition-all duration-200 opacity-40 hover:opacity-100 rounded-xl bg-cover bg-center relative px-2 py-8 bg-gray-700 text-center font-bold text-white text-xl z-[1] overflow-hidden",
                 {
                   "!opacity-100 ring-[4px] ring-white/50":
                     style.value === value,