src/components/sections/hero/HeroBillboardCarousel.tsx

@@ -101,7 +101,7 @@ const HeroBillboardCarousel = ({
             <HeroBackgrounds {...background} />
             <div className={cls(
                 "mx-auto flex flex-col gap-14 md:gap-10 relative z-10",
-                "w-full md:w-content-width md:h-full md:items-center md:justify-center",
+                "w-full md:w-content-width md:h-full md:items-start md:justify-center",
                 containerClassName
             )}>
                 <TextBox
@@ -111,7 +111,7 @@ const HeroBillboardCarousel = ({
                     tagIcon={tagIcon}
                     buttons={buttons}
                     className={cls(
-                        "flex flex-col gap-3 md:gap-1 w-content-width mx-auto",
+                        "flex flex-col gap-3 md:gap-1 w-content-width",
                         textBoxClassName
                     )}
                     titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
@@ -120,7 +120,7 @@ const HeroBillboardCarousel = ({
                     buttonContainerClassName={cls("flex flex-wrap gap-4 mt-3", buttonContainerClassName)}
                     buttonClassName={cls("rounded-full shadow-3d", buttonClassName)}
                     buttonTextClassName={buttonTextClassName}
-                    center={true}
+                    center={false}
                 />
 
                 <div className={cls("w-full -mx-[var(--content-padding)]", mediaWrapperClassName)}>