Update typography mixin and font variables. Update font styling on Member component

Author: briangesteban

components/containers/Member/Member.module.scss

@@ -1,4 +1,6 @@
 @use '@/styles/index' as *;
+@use '@/styles/typography' as *;
+@use '@/styles/variables' as *;
 
 .card {
   margin: 1rem 1rem 0 0.5rem;
@@ -24,20 +26,15 @@
 }
 
 .name {
-  font-style: italic;
-  font-family: $heading-font;
-  font-size: 1.5rem;
+  @include typography-title;
   color: var(--color-primary-content);
   margin-bottom: 0px;
-  line-height: unset;
 }
 
 %headingStyle {
-  font-family: $heading-font;
-  font-size: 1rem;
+  @include typography-subtitle;
   color: var(--color-primary-content);
   text-align: left;
-  line-height: normal;
   margin: 0px;
 }
 

styles/_typography.scss

@@ -15,6 +15,21 @@
   line-height: $line-height-md;
 }
 
+@mixin typography-title {
+  font-family: $font-family-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-bold;
+  font-style: italic;
+  line-height: normal;
+}
+
+@mixin typography-subtitle {
+  font-family: $font-family-secondary;
+  font-size: $font-size-2xs;
+  font-weight: $font-weight-bold;
+  line-height: normal;
+}
+
 @mixin typography-copy {
   font-family: $font-family-secondary;
   font-size: $font-size-sm;

styles/_variables.scss

@@ -16,6 +16,7 @@ $font-family-primary: 'Assistant', sans-serif;
 $font-family-secondary: 'Open Sans', sans-serif;
 
 // Font Size
+$font-size-2xs: 1rem; // 16px
 $font-size-xs: 1.25rem; // 20px
 $font-size-sm: 1.5rem; // 24px
 $font-size-md: 2.25rem; // 36px