Fix css

src/App.vue

@@ -16,6 +16,8 @@
           <div class="bg-overlay"></div>
         </div>
       </div>
+      1220
+      ouo
     </main>
   </div>
 </template>

src/components/FeatureCard.vue

@@ -7,7 +7,9 @@
             <h1>
                 <slot name="title"></slot>
             </h1>
-            <slot name="content"></slot>
+            <p class="content">
+                <slot name="content"></slot>
+            </p>
         </div>
     </div>
 </template>
@@ -29,7 +31,6 @@ const props = defineProps({
 <style scoped>
 .card {
     padding: 30px;
-    height: 277px;
     max-width: 1188px;
     border-radius: 13px;
     border: solid 3px #5D2A7C;
@@ -40,6 +41,7 @@ const props = defineProps({
     align-items: center;
     justify-content: center;
     gap: 20px;
+    flex-wrap: wrap;
 }
 /* if props.reverse, row-reverse */
 
@@ -58,15 +60,25 @@ const props = defineProps({
 
 .text {
     padding: 20px;
-    flex-grow: 1;
-    flex-shrink: 1
+    flex: 1 1 500px;
 }
+
+h1{
+    font-size: 40px;
+}
+
+.content{
+    font-size: 20px;
+}
+
 .img {
+    /* needed for responsiveness */
+    width: 0px; 
+    
     border-radius: 13px;
     margin: 20px;
-    width:40%;
-    flex-shrink: 0;
-    height:100%;
+    height: 200px;
+    flex: 1 0.1 30%;
     object-fit: cover;
 
     position: relative;

src/components/FeatureSection.vue

@@ -2,15 +2,15 @@
     <div class="container">
         <FeatureCard img="https://i.imgur.com/DFvavhw.png">
             <template #title>
-                <h1>Interactive</h1>
+                Interactive
             </template>
             <template #content>
                 <p>Run different part of code in a controllable order, watch variables in real-time, and easily track the active node</p>
             </template>
         </FeatureCard>
         <FeatureCard reverse="true">
             <template #title>
-                <h1>Dynamic</h1>
+                Dynamic
             </template>
             <template #content>
                 <p>Modify the running graph for instant changes in its behavior, such as adjusting parameters, adding or removing nodes from a workflow, and terminating a loop</p>
@@ -19,7 +19,7 @@
         </FeatureCard>
         <FeatureCard>
             <template #title>
-                <h1>Extendable</h1>
+                Extendable
             </template>
             <template #content>
                 <p>Create custom nodes from Python libraries of the domain you like, such as deep learning, robotics, or music synthesis</p>
@@ -28,10 +28,11 @@
         </FeatureCard>
         <FeatureCard reverse="true">
             <template #title>
-                <h1>Collaborative</h1>
+                Collaborative
             </template>
             <template #content>
-                <p>With Grapycal’s extension system, nodes for various domains can be shared and mixed to form powerful tools or artworksBtw, real-time collab is supported</p>
+                <p>With Grapycal’s extension system, nodes for various domains can be shared and mixed to form powerful tools or artworks</p>
+                <p>Btw, real-time collab is supported</p>
             </template>
 
         </FeatureCard>