fix: use 24 px gap between each section

Author: Odile078

src/components/sections/challenges/Header.tsx

@@ -16,7 +16,7 @@ export default function ChallengeHeader(): ReactElement {
   const challenge = useSelector((state) => state.challenges.current);
 
   return (
-    <div>
+    <div className="space-y-6">
       <Header isTeamChallenge={challenge?.isTeamChallenge} title={challenge?.name} subtitle={t("communities.challenge.title")} isHackathon={challenge?.isHackathon} />
       <Section subtitle={challenge?.description} />
     </div>

src/components/sections/communities/_partials/Section.tsx

@@ -33,7 +33,7 @@ interface SectionProps {
 }
  * @returns {ReactElement}
  */
-export default function Section({ title, titleBold = true, subtitle, id, hideSubtitleOnMobile = false, children, className }: SectionProps): ReactElement {
+export default function Section({ title, titleBold = true, subtitle, id, hideSubtitleOnMobile = false, children, className = "" }: SectionProps): ReactElement {
   return (
     <div id={id} className={`text-xl md:text-.5xl px-0 py-6 ${className}`}>
       {title && <H3 bold={titleBold}>{title}</H3>}

src/components/ui/accordion/Accordion.tsx

@@ -17,7 +17,7 @@ const Accordion: React.FC<AccordionProps> = ({ title, subtitle, content, isExpan
   };
 
   return (
-    <div className="mt-2">
+    <div>
       <div className={`flex gap-2 justify-between cursor-pointer ${!title && "items-start"}`} onClick={toggleAccordion}>
         <div>
           {title && <H3>{title}</H3>}

src/pages/communities/[slug]/challenges/[challenge_id]/index.tsx

@@ -125,7 +125,7 @@ export default function ChallengePage() {
           <MetaData description={challenge?.description} />
         </Head>
         <Wrapper paths={headerPaths}>
-          <div className="flex flex-col py-4 space-y-8 text-gray-700 divide-y divide-gray-200 divide-solid">
+          <div className="flex flex-col py-4 text-gray-700 divide-y divide-gray-200 divide-solid">
             <Header />
             <Rewards />
             <Objectives />
@@ -141,7 +141,7 @@ export default function ChallengePage() {
                     <Loader />
                   </div>
                 ) : (
-                  <div className="grid mt-8 space-y-8">
+                  <div className="grid mt-6">
                     <Hint>
                       <p
                         dangerouslySetInnerHTML={{