Improve responsive behaviour on smaller screens

plugins/Marketplace/stylesheets/plugin-details.less

@@ -103,9 +103,20 @@
 #pluginDetailsModal {
     min-height: 50vh;
     max-height: 80vh;
-    width: 60%;
     color: #000;
 
+    width: 60%;
+
+    @media (max-width: 1200px) {
+        width: 75%;
+    }
+
+    @media (max-width: 992px) {
+        width: 90%;
+        max-height: 90vh;
+        top: 5% !important; // required to override inline style set by the modal
+    }
+
     .btn-close {
         z-index: 100;
     }
@@ -124,18 +135,36 @@
         padding: 0;
         min-height: 50vh;
         max-height: 80vh;
+
+        @media (max-width: 992px) {
+            max-height: 90vh;
+        }
     }
 
     .modal-content__header {
         padding: 24px 24px 0;
         height: 160px;
 
+        @media (max-width: 600px) {
+            height: 160px;
+        }
+
         h2 {
             font-size: 32px;
             line-height: 48px;
             font-weight: 700;
             color: black;
             padding-top: 0;
+
+            @media (max-width: 600px) {
+                font-size: 24px;
+                line-height: 30px;
+            }
+
+            @media (max-width: 320px) {
+                font-size: 16px;
+                line-height: 24px;
+            }
         }
 
         .reviews-icon {
@@ -148,21 +177,43 @@
             dl {
                 display: flex;
                 flex-wrap: nowrap;
+                align-items: flex-start;
                 gap: 36px;
+
+                @media (max-width: 600px) {
+                    gap: 24px;
+                }
+
+                @media (max-width: 480px) {
+                    gap: 4px;
+                    justify-content: space-between;
+                }
             }
 
             dt {
                 flex-basis: 100%;
                 margin: 4px 0 0;
                 font-size: 12px;
                 line-height: 22px;
+
+                @media (max-width: 320px) {
+                    font-size: 10px;
+                }
             }
 
             dd {
                 flex-basis: 100%; /* Use full width */
                 margin: 0; /* Remove default margin */
                 font-size: 16px;
                 line-height: 24px;
+
+                @media (max-width: 600px) {
+                    font-size: 14px;
+                }
+
+                @media (max-width: 320px) {
+                    font-size: 10px;
+                }
             }
 
             .pair {
@@ -188,6 +239,10 @@
         padding: 0 24px 24px;
         color: #000;
 
+        @media (max-width: 992px) {
+            max-height: calc(~"90vh - 250px");
+        }
+
         h2, h3, h4, h5, h6 {
             margin: 20px 0 10px 0;
             color: #000000;
@@ -336,6 +391,18 @@
 
         .cta-container {
             width: 30%;
+
+            @media (max-width: 992px) {
+                width: 50%;
+            }
+
+            @media (max-width: 768px) {
+                width: 60%;
+            }
+
+            @media (max-width: 600px) {
+                width: 70%;
+            }
         }
 
         .matomo-badge-modal {