Use variables and mixins

client/src/components/ContentBlock.vue

@@ -12,7 +12,7 @@
         </a>
       </div>
 
-      <h3 v-if="instrumentLabel !== ''" class="content-block__instrument-label text-regular">{{instrumentLabel}}</h3>
+      <h3 v-if="instrumentLabel !== ''" class="content-block__instrument-label">{{instrumentLabel}}</h3>
       <h4 class="content-block__title">{{contentBlock.title}}</h4>
 
       <component v-for="component in contentBlock.contents"
@@ -150,6 +150,7 @@
 
     &__instrument-label {
       margin-bottom: 0;
+      @include regular-text();
     }
 
     &__actions {

client/src/components/content-blocks/SubtitleBlock.vue

@@ -9,7 +9,8 @@
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_variables.scss";
   .subtitle {
-    margin-bottom: 30px;
+    margin-bottom: $large-spacing;
   }
 </style>

client/src/styles/_mixins.scss

@@ -77,7 +77,7 @@
 
 @mixin main-title {
   font-family: $sans-serif-font-family;
-  font-weight: 700;
+  font-weight: 800;
   font-size: toRem(64px);
 }
 
@@ -96,7 +96,7 @@
 @mixin heading-3 {
   font-family: $sans-serif-font-family;
   font-weight: 600;
-  font-size: toRem(22px);
+  font-size: toRem(24px);
 }
 
 @mixin heading-4 {
@@ -119,7 +119,7 @@
 
 @mixin meta-title {
   font-family: $serif-font-family;
-  font-size: toRem(42px);
+  font-size: toRem(36px);
 }
 
 @mixin lead-paragraph {

client/src/styles/_objective-group.scss

@@ -14,7 +14,7 @@
   }
 
   &__objective {
-    padding: 10px 0;
+    padding: $small-spacing 0;
     line-height: 1.5;
     @include light-border(top);
 

client/src/styles/_typography.scss

@@ -72,14 +72,3 @@ input, textarea, select, button {
   margin-bottom: 7.5px;
   font-weight: 600;
 }
-
-.text-regular {
-  font-family: $sans-serif-font-family;
-  font-weight: $font-weight-regular;
-  font-size: toRem(18px);
-  line-height: toRem(27px);
-
-  &--small {
-    font-size: toRem(16px);
-  }
-}