upd

client/src/components/Button.tsx

@@ -23,7 +23,7 @@ function Button({
     <button
       disabled={disabled}
       onClick={handleClick}
-      className={`group relative px-6 py-2 rounded-full ${
+      className={`group relative px-6 py-2 rounded-full min-w-fit ${
         (color === "primary" ? "bg-gradient" : "") ||
         (color === "secondary" ? "outline outline-1 outline-[#3D425C]" : "")
       } ${

client/src/components/StreamButton.tsx

@@ -1,4 +1,6 @@
+import Button from "./Button";
 import ArrowIcon from "./icons/ArrowIcon";
+import ArrowRightIcon from "./icons/ArrowRightIcon";
 
 interface StreamButton {
   icon: string;
@@ -46,9 +48,22 @@ function StreamButton({
         </div>
       </a>
 
-      <div className="xl:hidden grid grid-cols-2">
-        <div className="">test 1</div>
-        <div className="">test 2</div>
+      <div className="xl:hidden grid sm:grid-cols-2 sm:gap-3 gap-6 border-b border-[#3D425C] py-6">
+        <div className="flex items-center gap-6">
+          <img src={icon} alt="" />
+          <div className="">
+            <p className="xl:text-2xl text-xl font-gilroy font-medium">
+              {title}
+            </p>
+            <p className="text-sm sm:hidden block">{location}</p>
+          </div>
+        </div>
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-sm sm:block hidden">{location}</p>
+          <Button icon={<ArrowRightIcon />}>
+            <a href={link}>Демоверсия</a>
+          </Button>
+        </div>
       </div>
     </>
   );