Numbered Cards small breakpoint

app/components/NumberedCards.js

@@ -6,15 +6,15 @@ import Button from "./Button";
 
 const NumberedCards = ({ title, subtitle, cards }) => {
   return (
-    <section className="bg-transparent py-8 px-5">
+    <section className="bg-transparent py-8 px-5 sm:py-12 sm:px-8">
       <div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
         {/* Section Header */}
-        <div className="mb-8">
+        <div className="mb-8 sm:mb-8">
           <SectionHeader title={title} subtitle={subtitle} />
         </div>
 
         {/* Cards Container */}
-        <div className="space-y-8">
+        <div className="space-y-8 sm:space-y-8">
           {cards.map((card, index) => (
             <NumberedCard
               key={index}
@@ -27,7 +27,7 @@ const NumberedCards = ({ title, subtitle, cards }) => {
         </div>
 
         {/* Call to Action Button */}
-        <div className="text-center mt-8">
+        <div className="text-center mt-8 sm:text-left sm:mt-8">
           <Button variant="default" size="large">
             Create CommunityRule
           </Button>