added fetch card from server, style changes, i18

src/components/multiplayer/multiplayer.tsx

@@ -7,16 +7,18 @@ import photo3 from "./Photo3.png";
 import { Button } from "../buttonDemo/buttonDemo"
 import { Content } from "../content/content";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export const Multiplayer: React.FC<any> = ({text}) => {
   const [captionSmall, setCaptionSmall] = useState(true);
+  const {t} = useTranslation()
   return (
     <div
       data-aos="zoom-in"
       data-aos-duration="400"
       className="multiplayer__container"
     >
-      <Content captionSmall={captionSmall} text={text}></Content>
+      <Content isColor={false} captionSmall={captionSmall} text={text}></Content>
       <div className="multiplayer__photo-container">
         <img alt="device" src={photo1} className="multiplayer__image" />
         <img alt="device" src={photo} className="multiplayer__image" />
@@ -25,7 +27,7 @@ export const Multiplayer: React.FC<any> = ({text}) => {
       </div>
       <div className="main-block__subblock-container">
         <div className={captionSmall ? " main-block__caption_small main-block_subblock " : 'main-block_subblock'}>
-          {text.mainBlockSubblock}
+          {t(`${text}-mainBlockSubblock`)}
           <Button text={text}></Button>
         </div>
       </div>