Center text on very small screens

Author: hasparus

src/app/conf/2025/components/cta-card-section/index.tsx

@@ -21,7 +21,7 @@ export function CtaCardSection({
         className="relative overflow-hidden bg-gradient-to-r from-pri-dark to-pri-base p-6 dark:from-pri-darker dark:to-pri-dark sm:p-16"
         {...rest}
       >
-        <div className="relative z-10 flex flex-col gap-10 sm:items-start">
+        <div className="relative z-10 flex flex-col gap-10 sm:items-start [@media(max-width:420px)]:text-center">
           <div className="flex flex-col gap-6">
             <h2 className="text-neu-0 typography-d1 dark:text-neu-900">
               {heading}
@@ -46,7 +46,7 @@ export function CtaCardSection({
               dark:[--end:hsl(var(--color-sec-base))]
 
               [mask-size:cover]
-              max-sm:[mask-position:center] max-sm:opacity-70
+              max-sm:[mask-position:center] max-sm:opacity-50
               sm:[mask-size:1117px]
             "
           style={{