Merge pull request #379 from deriv-com/meenu-cta-block-breakpoint-fixes

libs/blocks/src/lib/cta/index.tsx

@@ -20,14 +20,12 @@ export const CTABlock = ({
     <Section className=" py-general-4xl">
       <div
         className={qtMerge(
-          variant === 'content-left'
-            ? 'flex-col lg:flex-row'
-            : 'flex-col lg:flex-row-reverse ',
-          ' relative isolate flex  h-full min-h-[496px] justify-end gap-gap-lg  md:justify-center  lg:mx-auto  lg:max-w-[1232px] ',
+          variant === 'content-left' ? 'lg:flex-row' : 'lg:flex-row-reverse ',
+          ' relative isolate flex h-full min-h-[496px] justify-end gap-gap-lg  max-lg:flex-col md:justify-center lg:mx-auto  lg:max-w-[1232px] ',
         )}
       >
         {content && (
-          <div className="absolute -z-10 h-full w-full overflow-hidden object-cover object-top lg:relative ">
+          <div className="-z-10 h-full w-full overflow-hidden object-cover object-top max-lg:absolute lg:relative ">
             {content}
           </div>
         )}
@@ -36,12 +34,12 @@ export const CTABlock = ({
             variant === 'content-left'
               ? 'lg:ps-general-2xl '
               : 'lg:pe-general-2xl ',
-            'flex w-full flex-col justify-center gap-gap-3xl px-general-lg pb-general-2xl lg:px-general-none lg:pb-general-none',
+            'flex w-full flex-col justify-center gap-gap-3xl px-general-lg pb-general-2xl md:justify-center lg:px-general-none lg:pb-general-none',
           )}
         >
           <div className="flex w-full flex-col gap-gap-lg sm:w-[50%] lg:w-full">
             {title && (
-              <Heading.H2 className="text-solid-slate-50 lg:text-typography-prominent">
+              <Heading.H2 className="max-lg:text-solid-slate-50 lg:text-typography-prominent">
                 {title}
               </Heading.H2>
             )}