make the cards tall in accordance to their content height.

Fixes gitpod-io/website#814

Author: nisarhassan12

src/components/PopOver.tsx

@@ -44,15 +44,15 @@ const StyledDescripion = styled.span`
         font-weight: 400;
         color: ${colors.textDark};
         background: ${colors.offWhite2};
-        z-index: 1000 !important;
+        z-index: 1000;
         border-radius: 3px;
 
         @media(max-width: 1080px) {
             position: absolute;
             right: -5rem;
             top: 2.4rem;
             min-width: 18rem;
-            z-index: 1999999999;
+            z-index: 9999999999;
         }
 
          @media(min-width: 1081px) {

src/components/PricingBox.tsx

@@ -63,6 +63,13 @@ const StyledPricingBox = styled.div<StyledPricingBoxProps>`
         padding: 2rem 3rem;
     }
 
+    @media(max-width: 650px) {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-height: 0;
+    }
+
     @media(max-width: ${sizes.breakpoints.sm}) {
         min-width: 25rem;
         min-height: auto;
@@ -174,6 +181,12 @@ const StyledPricingBox = styled.div<StyledPricingBoxProps>`
         @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) {
             bottom: ${({ transform }) => (transform ? '2rem' : '1.5rem')};
         }
+
+        @media(max-width: 650px) {
+            position: static;
+            transform: none;
+            margin-top: 5rem;
+        }
     }
 
     .text {