Fix the width for mobiles

Author: hasparus

src/components/index-page/graphql-advantages/integration.tsx

@@ -10,7 +10,7 @@ export function IntegrationFigure() {
 
   return (
     <div
-      className="flex min-h-[300px] w-full flex-col items-center justify-center bg-gradient-to-b from-[hsla(75,57%,97%,0)] to-white px-[14px] py-[30px] dark:to-neu-100/20 xl:px-[46px]"
+      className="flex w-full max-w-[100vw] flex-col items-center justify-center bg-gradient-to-b from-[hsla(75,57%,97%,0)] to-white px-[14px] py-[30px] dark:to-neu-100/20 xl:min-h-[300px] xl:px-[46px]"
       aria-hidden
     >
       <div className="flex w-full items-center justify-center bg-pri-lighter/50 px-10 py-6 dark:bg-pri-base/15">
@@ -20,14 +20,7 @@ export function IntegrationFigure() {
       </div>
 
       <div className="relative mt-5 w-full overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_23%,white_77%,transparent)]">
-        <div
-          className="flex animate-scroll gap-3"
-          style={
-            {
-              "--animation-duration": "30s",
-            } as React.CSSProperties
-          }
-        >
+        <div className="flex animate-scroll gap-3 [--animation-duration:10s] lg:[--animation-duration:30s]">
           {[...languages, ...languages].map((language, index) => (
             <div
               key={index}