diff --git a/src/components/PrimaryFeatures.jsx b/src/components/PrimaryFeatures.jsx
index b7f1562..79e2bdd 100644
--- a/src/components/PrimaryFeatures.jsx
+++ b/src/components/PrimaryFeatures.jsx
@@ -59,7 +59,7 @@ export function PrimaryFeatures() {
     <section
       id="features"
       aria-label="Features for running your books"
-      className="relative overflow-hidden pb-28 pt-20 sm:py-32"
+      className="relative overflow-hidden pb-28 pt-20 sm:py-32 overflow-avoid"
     >
       <BlurBG />
       <Container className="relative">
@@ -67,7 +67,7 @@ export function PrimaryFeatures() {
           <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
             Elevate your web development experience with the comprehensive toolset!
           </h2>
-          <p className="mt-6 text-lg tracking-tight text-emerald-100">
+          <p className="mt-6 text-lg tracking-tight text-emerald-100 text-overflow-avoid">
             Everything you need to create pixel-perfect, responsive websites with ease.
           </p>
         </div>
@@ -218,4 +218,4 @@ const FeatureMedia = memo(function FeatureMedia({ feature }) {
         ))}
     </div>
   );
-});
+});
\ No newline at end of file
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index b509cbc..bca7b27 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -28,4 +28,27 @@
 /* Gap between columns */
 .column-gap-6 {
   column-gap: 1.5rem;  
+}
+
+@media (max-width: 370px) {
+  .overflow-avoid {
+    padding-top: 20px;
+  }
+}
+
+@media (max-width: 340px) {
+  .overflow-avoid {
+    padding-top: 10px;
+  }
+}
+
+@media (max-width: 325px) {
+  .overflow-avoid {
+    padding-top: 5px;
+  }
+
+  .text-overflow-avoid {
+    font-size: 1rem;
+    margin-top: 0.25rem;
+  }
 }
\ No newline at end of file