added vendor prefixes

src/components/demos/demos.css

@@ -3,14 +3,21 @@
 }
 
 .demos_container {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
     flex-direction: column;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
     justify-content: center;
     border-radius: 16px;
     position: relative;
     width: 84%;
     text-decoration: none;
-    
+
 }
 
 .demos__tittle {
@@ -34,12 +41,19 @@
 
 .demo {
     cursor: pointer;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
     flex-direction: row;
     gap: 40px;
 }
 
 .demo_image {
+    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.3)));
+    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
     border-radius: 16px;
 
@@ -48,11 +62,17 @@
 }
 
 .demo_info {
+    -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding-top: 45px;
     padding-bottom: 45px;
     padding-right: 40px;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
     flex-direction: column;
     gap: 20px;
     width: 100%;
@@ -121,12 +141,19 @@
 }
 
 .width {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
     align-items: flex-end
 }
 
 .title__block {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
     gap: 5px;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
     flex-direction: column;
 }
 
@@ -143,13 +170,20 @@
 }
 
 .demos_container:hover>div>img {
+    -webkit-transition: opacity ease-out 0.2s;
+    -o-transition: opacity ease-out 0.2s;
     transition: opacity ease-out 0.2s;
     opacity: 1;
 
 }
 
 .demos__list {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
     flex-direction: column;
     gap: 20px;
 }
@@ -161,15 +195,15 @@
         margin: auto auto 72px auto;
 
     }
-    
+
     .demo {
         gap: 24px;
         height: 306px;
     }
 
-    .demos_container  {
+    .demos_container {
         width: 70%;
-        
+
     }
 
     .demo__icon {
@@ -177,7 +211,7 @@
         right: 43px;
         width: 19px;
         height: 19px;
-    
+
     }
 
     .title__demo {
@@ -198,6 +232,7 @@
 
     .demo_image {
         height: auto;
+        -o-object-fit: cover;
         object-fit: cover;
         width: 240px;
     }
@@ -206,6 +241,7 @@
 
 @media screen and (max-width: 1024px) {
     .demo__container {
+        -webkit-box-sizing: border-box;
         box-sizing: border-box;
         padding: 120px 12px 80px;
 
@@ -229,11 +265,16 @@
 
     .demos__list {
         padding: 120px 20px 80px;
+        -webkit-box-sizing: border-box;
         box-sizing: border-box;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
         align-items: center;
     }
 
     .width {
+        -webkit-box-align: stretch;
+        -ms-flex-align: stretch;
         align-items: stretch;
     }
 
@@ -246,7 +287,9 @@
     }
 
     .demo_info {
+        -webkit-box-sizing: border-box;
         box-sizing: border-box;
+        -ms-grid-rows: auto 1fr;
         grid-template-rows: auto 1fr;
 
 
@@ -262,6 +305,7 @@
     }
 
     .demo__container_mobile {
+        -webkit-box-sizing: border-box;
         box-sizing: border-box;
         padding: 0px 10px 80px;
     }
@@ -270,19 +314,30 @@
 
 
     .demo {
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
         flex-direction: column;
         gap: 0;
     }
 
     .demo_info {
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
         flex-direction: column;
         gap: 15px;
         padding: 15px;
     }
 
     .demo_image {
+        -o-object-fit: cover;
         object-fit: cover;
 
         width: 100%;

src/components/demos/demos.tsx

@@ -9,6 +9,7 @@ import iconButton from "./iconButton.svg"
 
 export const Demos: React.FC<any> = ({ text }) => {
     const { card, card1 } = text;
+    console.log(text)
 
     return (<div className=" demo__container_mobile main-block__container width demo__container">
         <h3 className='demos__tittle'>
@@ -33,7 +34,7 @@ export const Demos: React.FC<any> = ({ text }) => {
                 </div>
             </div>
         </a>
-        <a href='https://stream.graff.tech/' target='_blank' rel="noreferrer"  data-aos="fade-up"
+        <a href='http://stream.graff.tech:16005/' target='_blank' rel="noreferrer"  data-aos="fade-up"
             data-aos-delay="150" className='demos_container'>
             <div className="main-block__icon_container demo__icon">
                 <img alt='icon' src={iconButton} className="main-block__icon"></img>