Use H2 instead of p for SEO

src/components/HeroSection/HeroSection.css

@@ -57,15 +57,17 @@
 }
 
 .heroSubTitle {
+  @apply --marketplaceBodyFontStyles;
+
   color: var(--matterColorLight);
-  margin-bottom: 63px;
-  margin-top: 0;
+  margin: 0 0 63px 0;
 
   @apply --animationProperties;
   animation-delay: 0.65s;
 
   @media (--viewportMedium) {
     max-width: var(--desktopTitleMaxWidth);
+    margin: 0 0 63px 0;
   }
 
   @media (--viewportXLarge) {

src/components/HeroSection/HeroSection.js

@@ -32,9 +32,9 @@ const HeroSection = props => {
       <h1 className={css.heroMainTitle}>
         <FormattedMessage id="HeroSection.title" />
       </h1>
-      <p className={css.heroSubTitle}>
+      <h2 className={css.heroSubTitle}>
         <FormattedMessage id="HeroSection.subTitle" />
-      </p>
+      </h2>
       <Button className={css.mobileSearchButton} onClick={handleMobileSearchClick}>
         <IconSearch rootClassName={css.searchIcon} />
         <FormattedMessage id="HeroSection.mobileSearchButtonText" />

src/components/HeroSection/__snapshots__/HeroSection.test.js.snap

@@ -7,12 +7,12 @@ exports[`HeroSection matches snapshot 1`] = `
       Book saunas everywhere.
     </span>
   </h1>
-  <p
+  <h2
     className={undefined}>
     <span>
       The largest online community to rent saunas in Finland.
     </span>
-  </p>
+  </h2>
   <button
     className=""
     disabled={false}