profile page and hero bug fixes

src/components/Footer/Footer.css

@@ -10,6 +10,10 @@
   background-color: var(--matterColorBright);
 
   @media (--viewportMedium) {
+    padding: 0 30px 33px 30px;
+  }
+
+	@media (--viewportLarge) {
     padding: 0 30px 81px 30px;
     border-top: none;
   }
@@ -19,6 +23,10 @@
  * view from the outermost paddings*/
 .topBorderWrapper {
   @media (--viewportMedium) {
+    padding-top: 41px;
+  }
+
+  @media (--viewportLarge) {
     padding-top: 73px;
 
     border-top-style: solid;
@@ -62,7 +70,7 @@
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
-  margin-bottom: 60px;
+  margin-bottom: 42px;
 
   @media (--viewportMedium) {
     margin-bottom: 0;

src/components/UserCard/UserCard.css

@@ -34,10 +34,9 @@
 .desktopBio {
   /* Preserve newlines, but collapse other whitespace */
   white-space: pre-line;
-
   margin: 18px 0 0 0;
-
   transition: all 1s ease-in;
+  @apply --marketplaceH4FontStyles;
 
   @media (--viewportMedium) {
     margin: 18px 0 0 0;
@@ -60,9 +59,11 @@
 
 .showMore {
   margin-left: 5px;
+   @apply --marketplaceH4FontStyles;
 }
 
 .links {
+	 @apply --marketplaceH4FontStyles;
 }
 
 .withBioMissingAbove {

src/containers/LandingPage/LandingPage.css

@@ -10,6 +10,7 @@
 
 /* heroContainer gives the height for SectionHero */
 /* Safari has a bug with vw padding inside flexbox. Therefore we need an extra div (container) */
+/* If you've lot of content for the hero, multiple lines of text, make sure to adjust min-heights for each media breakpoint accordingly */
 .heroContainer {
   display: flex;
   flex-direction: column;
@@ -19,11 +20,14 @@
   padding: 0;
 
   @media (--viewportMedium) {
-    min-height: 80vh;
+	  min-height: 500px;
+	  height: 80vh;
+	  max-height: none;
   }
 
   @media (--viewportLarge) {
-    min-height: calc(100vh - var(--topbarHeightDesktop));
+	  min-height: 600px;
+	  height: calc(100vh - var(--topbarHeightDesktop));
   }
 }
 

src/containers/ProfilePage/ProfilePage.css

@@ -114,7 +114,8 @@
   margin-bottom: 0;
 
   @media (--viewportMedium) {
-    margin-bottom: 0;
+	  margin-top: 48px;
+    margin-bottom: 8px;
   }
   @media (--viewportLarge) {
     margin-top: 58px;
@@ -173,11 +174,20 @@
   margin: 24px 0 26px 0;
 }
 
+.mobileReviews {
+	margin-bottom: 36px;
+}
+
 .desktopReviews {
   margin-top: 28px;
 
+  @media (--viewportMedium) {
+		margin-bottom: 48px;
+  }
+
   @media (--viewportLarge) {
     max-width: 600px;
+    margin-bottom: 0;
   }
 }