Rewrite styles to scss and use i respective components

src/components/HeroHeadline/HeroHeadline.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import './hero-headline.scss';
+export default function ({ children, alt }: React.PropsWithChildren<{ alt?: string }>) {
+  return (
+    <div className='hero-headline'>
+      {children}
+      <span className='hero-headline__alt'>{alt}</span>
+    </div>
+  );
+}

src/components/HeroHeadline/hero-headline.scss

@@ -0,0 +1,23 @@
+.hero-headline {
+  font-size: 38px;
+  font-weight: 300;
+  line-height: 1.2;
+  color: var(--color-white);
+  padding: 0;
+  margin: 0;
+
+  &__alt {
+    color: var(--color-gray-light);
+  }
+
+  &--inverse {
+    color: var(--color-gray-light);
+  }
+
+  @media (--until-sm) {
+    font-size: 26px;
+    &__alt {
+      display: block;
+    }
+  }
+}