feat mobile styling

components/project/project-graduated.tsx

@@ -10,7 +10,7 @@ export const ProjectGraduated = () => {
   const { graduatedProjects } = useProjects()
 
   return (
-    <div className="flex flex-col gap-10 justify-center dark:bg-anakiwa-975 py-16 lg:py-20">
+    <div className="flex flex-col gap-10 justify-center dark:bg-anakiwa-975 py-16 lg:py-20 overflow-hidden">
       <span className="dark:text-tuatara-100 text-tuatara-950 text-xl lg:text-3xl lg:leading-[45px] font-normal font-sans text-center lg:px-0 px-4">
         {LABELS.PROJECTS_PAGE.GRADUATED_PROJECTS}
       </span>

components/sections/HomepageBanner.tsx

@@ -31,7 +31,7 @@ export const HomepageBanner = () => {
               external
               className="mx-auto"
             >
-              <Button className="lg:w-full mx-auto">
+              <Button className="lg:w-full mx-auto lg:text-lg !text-xs">
                 <div className="flex items-center gap-2">
                   <Icons.discord fill="white" className="h-4" />
                   <span className="uppercase">
@@ -58,7 +58,7 @@ export const HomepageBanner = () => {
               external
               className="mx-auto"
             >
-              <Button className="lg:w-full mx-auto">
+              <Button className="lg:w-full mx-auto lg:text-lg !text-xs">
                 <div className="flex items-center gap-2">
                   <Icons.discord fill="white" className="h-4" />
                   <span className="uppercase">

components/slider.tsx

@@ -155,7 +155,13 @@ export const Slider = ({
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <div className={twMerge("flex flex-col gap-5 relative px-1", className)}>
+      <div
+        className={twMerge(
+          "flex flex-col gap-5 relative overflow-hidden",
+          isMobile ? "" : "px-1",
+          className
+        )}
+      >
         <div
           ref={sliderRef}
           className={twMerge(