Update MovieCard button labels for consistency and adjust layout margins in MovieList and SearchMovies components for improved responsiveness.

src/components/atoms/MovieCard/index.tsx

@@ -107,7 +107,7 @@ export const MovieCard: FC<Props> = ({
               className={`${buttonClass} bg-primary/70 text-white hover:bg-primary`}
               onClick={handleAdd}
             >
-              Add to watchlist
+              Add to list
             </button>
           )}
           {alreadyInStore && (
@@ -132,7 +132,7 @@ export const MovieCard: FC<Props> = ({
                 className={`${buttonClass} bg-primary/70 text-white hover:bg-primary`}
                 onClick={handleRemove}
               >
-                Remove from watchlist
+                Remove from list
               </button>
             </>
           )}

src/components/molecules/MovieList/index.tsx

@@ -61,7 +61,7 @@ export const MovieList: FC<Props> = ({
   };
 
   return (
-    <section className="my-20">
+    <section className="my-4 md:my-10">
       <div className="container">
         <div className="row">
           <div className="col-12 md:col-10">

src/components/molecules/SearchMovies/index.tsx

@@ -14,10 +14,10 @@ export const SearchMovies = () => {
   };
 
   return (
-    <section className="mb-20">
+    <section className="mb-4 md:mb-10">
       <div className="container">
         <div className="row justify-center">
-          <div className="col-5">
+          <div className="col-12 md:col-5">
             <SearchInput onChange={handleSearch} />
           </div>
         </div>