Update hero styles

index.html

@@ -52,7 +52,7 @@
       </div>
       <div class="hero-body">
         <div class="container">
-          <h1 class="headline title has-text-white">Kate<br>& Brett</h1>
+          <h1 class="headline title has-text-white">Kate<br><sup>&</sup> Brett</h1>
           <h2 class="subtitle has-text-white">are getting married!</h2>
         </div>
       </div>

styles.scss

@@ -34,6 +34,10 @@ a {
     &.headline {
         font-family: $family-cursive;
     }
+
+    sup {
+        font-size: 0.5em;
+    }
 }
 
 .subtitle {
@@ -42,6 +46,7 @@ a {
 
 .tabs {
     font-size: 1.1rem;
+    letter-spacing: 1px;
 
     &.is-primary {
         background-color: $primary;
@@ -208,31 +213,31 @@ a {
 
 .headline {
     @include from($desktop) {
-        font-size: 7rem;
+        font-size: 9rem;
         line-height: 7rem;
     }
 
     @include until($desktop) {
-        font-size: 5rem;
-        line-height: 5rem;
+        font-size: 7.5rem;
+        line-height: 6rem;
     }
 
     @include until($tablet) {
-        font-size: 3rem;
-        line-height: 3rem;
+        font-size: 5rem;
+        line-height: 4rem;
     }
 
     &+.subtitle {
         @include from($desktop) {
-            font-size: 2rem;
+            font-size: 2.5rem;
         }
 
         @include until($desktop){
-            font-size: 1.5rem;
+            font-size: 2rem;
         }
 
         @include until($tablet) {
-            font-size: 1rem;
+            font-size: 1.5rem;
         }
     }
 }