diff --git a/src/components/Features-carousel/FeaturesCarousel.style.js b/src/components/Features-carousel/FeaturesCarousel.style.js
index fba8bb303d04cb..163392397340b8 100644
--- a/src/components/Features-carousel/FeaturesCarousel.style.js
+++ b/src/components/Features-carousel/FeaturesCarousel.style.js
@@ -78,7 +78,7 @@ export const FeaturesWrapper = styled.div`
 
       @media (min-width: 768px) {
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
         grid-column-gap: 40px;
         min-height: auto;
         overflow-anchor: none;
@@ -114,7 +114,7 @@ export const FeaturesWrapper = styled.div`
       & .body {
         opacity: 1;
         font-size: 1rem;
-        max-height: 200px;
+        max-height: none;
 
         @media (min-width: 768px){
             color: ${props => props.theme.white};
@@ -164,7 +164,7 @@ export const FeaturesWrapper = styled.div`
       & > div {
         max-width: 100%;
         @media (max-width: 768px) {
-            maxHeight: 380px;
+            max-height: 380px;
             height: 380px;
             overflow-y:scroll;
         }
@@ -177,16 +177,14 @@ export const FeaturesWrapper = styled.div`
       }
 
       @media (min-width: 768px) {
-        width: 400px;
+        width: 100%;
+        min-width: 0;
 
         & > div {
           height: auto;
         }
       }
 
-      @media (min-width: 900px) {
-        width: 600px;
-      }
     }
 
     .learn-more-link {
diff --git a/src/components/Inline-quotes/index.js b/src/components/Inline-quotes/index.js
index 18b1a0928d0494..8ef8a49c5360fb 100644
--- a/src/components/Inline-quotes/index.js
+++ b/src/components/Inline-quotes/index.js
@@ -21,7 +21,7 @@ const QuotesWrapper = styled.div`
     border-image-slice: 1 0 1 1;
     transition: border-image 0.6s ease-in-out;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       flex-direction: column;
       padding: 1.5rem 1rem;
       gap: 1rem;
@@ -51,7 +51,7 @@ const QuotesWrapper = styled.div`
     line-height: 1.6;
     text-align: ${props => props.$onlyQuoteIsPresent ? "center" : "right"};
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       flex: 0 0 100%;
       text-align: center;
       line-height: 1.5;
@@ -74,7 +74,7 @@ const QuotesWrapper = styled.div`
     padding: 0 1rem;
     text-align: left;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       padding: 0;
       text-align: center;
     }
@@ -105,7 +105,7 @@ const QuotesWrapper = styled.div`
     border: none;
     border-left: 1px solid ${props => props.theme.DarkTheme ? "#444" : "#ddd"};
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       width: clamp(150px, 60%, 200px);
       height: 0;
       margin: 0.5rem auto;
@@ -119,7 +119,7 @@ const QuotesWrapper = styled.div`
     align-items: center;
     gap: 1rem;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       flex-direction: column;
       gap: 0.75rem;
     }