@mtvh/mtvh-design-system 0.0.24 → 0.0.26

package/assets/scss/config/_map-amends.scss

@@ -1,5 +1 @@
 //modify bootstrap map
-
-
-
-

package/assets/scss/config/_palette.scss

@@ -1,51 +1,49 @@
 :root {
-
   --mtvh-white: #ffffff;
   --mtvh-black: #000000;
   --mtvh-transparent: transparent;
-  --mtvh-grey-01: #F7F7F7;
-  --mtvh-grey-02: #EAE9E9;
-  --mtvh-grey-03: #DADADA;
-  --mtvh-grey-04: #C7C7C7;
-  --mtvh-grey-05: #9A9A9A;
+  --mtvh-grey-01: #f7f7f7;
+  --mtvh-grey-02: #eae9e9;
+  --mtvh-grey-03: #dadada;
+  --mtvh-grey-04: #c7c7c7;
+  --mtvh-grey-05: #9a9a9a;
   --mtvh-grey-06: #696969;
 
-  --mtvh-blue-01: #EEF9FF;
-  --mtvh-blue-02: #6DBDF5;
-  --mtvh-blue-03: #1791E8;
-  --mtvh-blue-04: #0072BF;
+  --mtvh-blue-01: #eef9ff;
+  --mtvh-blue-02: #6dbdf5;
+  --mtvh-blue-03: #1791e8;
+  --mtvh-blue-04: #0072bf;
   --mtvh-blue-05: #005792;
-  --mtvh-blue-06: #00385E;
-
-  --mtvh-yellow-01: #FFF7D6;
-  --mtvh-yellow-02: #F8D643;
-  --mtvh-yellow-03: #E8C426;
-  --mtvh-yellow-04: #D8B000;
-  --mtvh-yellow-05: #BF9C04;
-  --mtvh-yellow-06: #A18405;
-
-  --mtvh-green-01: #E7F7E3;
-  --mtvh-green-02: #82CC71;
-  --mtvh-green-03: #5EAF4B;
-  --mtvh-green-04: #23870B;
+  --mtvh-blue-06: #00385e;
+
+  --mtvh-yellow-01: #fff7d6;
+  --mtvh-yellow-02: #f8d643;
+  --mtvh-yellow-03: #e8c426;
+  --mtvh-yellow-04: #d8b000;
+  --mtvh-yellow-05: #bf9c04;
+  --mtvh-yellow-06: #a18405;
+
+  --mtvh-green-01: #e7f7e3;
+  --mtvh-green-02: #82cc71;
+  --mtvh-green-03: #5eaf4b;
+  --mtvh-green-04: #23870b;
   --mtvh-green-05: #156402;
-  --mtvh-green-06: #0F4902;
-
-  --mtvh-purple-01: #F6F4FF;
-  --mtvh-purple-02: #B49BDE;
-  --mtvh-purple-03: #9470D1;
-  --mtvh-purple-04: #895ED0;
-  --mtvh-purple-05: #5D2CAE;
-  --mtvh-purple-06: #380C80;
-
-  --mtvh-red-01: #FFF6F7;
-  --mtvh-red-02: #FF7C8C;
-  --mtvh-red-03: #FA3D54;
-  --mtvh-red-04: #DD080D;
-  --mtvh-red-05: #BE0509;
+  --mtvh-green-06: #0f4902;
+
+  --mtvh-purple-01: #f6f4ff;
+  --mtvh-purple-02: #b49bde;
+  --mtvh-purple-03: #9470d1;
+  --mtvh-purple-04: #895ed0;
+  --mtvh-purple-05: #5d2cae;
+  --mtvh-purple-06: #380c80;
+
+  --mtvh-red-01: #fff6f7;
+  --mtvh-red-02: #ff7c8c;
+  --mtvh-red-03: #fa3d54;
+  --mtvh-red-04: #dd080d;
+  --mtvh-red-05: #be0509;
   --mtvh-red-06: #970307;
 
-  --mtvh-stone-01: #F9F5F0;
-  --mtvh-stone-02: #F9F2EA;
-
+  --mtvh-stone-01: #f9f5f0;
+  --mtvh-stone-02: #f9f2ea;
 }

package/assets/scss/config/_theme.scss

@@ -1,7 +1,6 @@
 :root {
-
-  --mtvh-font: 'Paralucent', sans-serif;
-  --mtvh-link-color:  var(--mtvh-blue-04);
+  --mtvh-font: "Paralucent", sans-serif;
+  --mtvh-link-color: var(--mtvh-blue-04);
   --mtvh-primary-outline-color: var(--mtvh-blue-03);
   --mtvh-dark-outline-color: var(--mtvh-black);
   --mtvh-border-color: var(--mtvh-grey-06);
@@ -17,7 +16,7 @@
   --mtvh-btn-min-width: 10rem;
 
   /* Shadows */
-  --mtvh-box-shadow:  0px 4px 8px 0px rgba(0, 0, 0, 0.25);
+  --mtvh-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
   --mtvh-btn-focus-box-shadow: 0;
 
   /* MTVH close button */
@@ -30,6 +29,4 @@
   --mtvh-btn-close-danger-hover-bg: var(--mtvh-red-03);
   --mtvh-btn-close-success-hover-bg: var(--mtvh-green-03);
   --mtvh-btn-close-warning-hover-bg: var(--mtvh-yellow-03);
-
 }
-

package/assets/scss/config/_variables.scss

@@ -1,12 +1,12 @@
 $prefix: mtvh-;
 $enable-important-utilities: true !default;
-$data-svg-prefix: 'data:image/svg+xml;utf-8,';
+$data-svg-prefix: "data:image/svg+xml;utf-8,";
 $font-path: "./fonts/" !default;
 $asset-icon-path: "./images/icons/" !default;
 
 // Font
 $font-size-base: 1rem;
-$font-size-xxs: $font-size-base *  0.625;
+$font-size-xxs: $font-size-base * 0.625;
 $font-size-xs: $font-size-base;
 $font-size-sm: $font-size-base * 1.125;
 $font-size-md: $font-size-base * 1.375;
@@ -24,11 +24,11 @@ $font-sizes: (
   5: $font-size-md,
   6: $font-size-sm,
   7: $font-size-xs,
-  8: $font-size-xxs
+  8: $font-size-xxs,
 );
 
 $line-height-base: 1.5;
-$link-color: #0072BF;
+$link-color: #0072bf;
 $link-hover-color: #005792;
 $body-color: #000;
 $font-family-sans-serif: Arial, sans-serif;
@@ -43,37 +43,36 @@ $mtvh-font-weight-semibold: 600 !default;
 $mtvh-font-weight-bold: 700 !default;
 $mtvh-font-weight-bolder: bolder !default;
 
-$success:       #23870B;
-$info:          #895ED0;
-$warning:       #F8D643;
-$danger:        #DD080D;
-$primary:       #0072BF;
-$dark:          #000000;
-$secondary:     #696969;
-$light:         #ffffff;
-$stone:         #F9F2EA;
-$grey-01:       #f7f7f7;
-$danger-bg-subtle: #FF7C8C;
+$success: #23870b;
+$info: #895ed0;
+$warning: #f8d643;
+$danger: #dd080d;
+$primary: #0072bf;
+$dark: #000000;
+$secondary: #696969;
+$light: #ffffff;
+$stone: #f9f2ea;
+$grey-01: #f7f7f7;
+$danger-bg-subtle: #ff7c8c;
 $danger-text-emphasis: #000000;
-$grey-03:      #DADADA;
+$grey-03: #dadada;
 
 $theme-colors: (
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger,
-  "light":      $light,
-  "dark":       $dark,
-  "stone":      $stone,
-  "grey-01":    $grey-01,
-  "grey-03":    $grey-03,
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark": $dark,
+  "stone": $stone,
+  "grey-01": $grey-01,
+  "grey-03": $grey-03,
 );
 
-
 //button
-$input-btn-font-family:$font-family-sans-serif;
+$input-btn-font-family: $font-family-sans-serif;
 $btn-border-radius: 3rem;
 $btn-font-weight: bold;
 $btn-padding-x: 1rem;
@@ -107,8 +106,8 @@ $mtvh-spacing-11: 3.75rem;
 $spacer: 1rem;
 $spacers: (
   0: 0,
-  1: $spacer * .25,
-  2: $spacer * .5,
+  1: $spacer * 0.25,
+  2: $spacer * 0.5,
   3: $spacer,
   4: $spacer * 1.5,
   5: $spacer * 3,
@@ -119,25 +118,27 @@ $spacers: (
   15: $mtvh-spacing-5,
   16: $mtvh-spacing-6,
   17: $mtvh-spacing-7,
-  18: $mtvh-spacing-8
+  18: $mtvh-spacing-8,
 );
 
-$icon-size-scale-xs     : 16px !default;
-$icon-size-scale-sm     : 20px !default;
-$icon-size-scale-md     : 28px !default;
-$icon-size-scale-lg     : 42px !default;
-$icon-size-scale-xl     : 56px !default;
+$icon-size-scale-xs: 16px !default;
+$icon-size-scale-sm: 20px !default;
+$icon-size-scale-md: 28px !default;
+$icon-size-scale-lg: 44px !default;
+$icon-size-scale-xl: 56px !default;
 
 $mtvh-icon-sizes: (
-  "xs"                 : $icon-size-scale-xs,
-  "sm"                 : $icon-size-scale-sm,
-  "md"                 : $icon-size-scale-md,
-  "lg"                 : $icon-size-scale-lg,
-  "xl"                 : $icon-size-scale-xl
+  "xs": $icon-size-scale-xs,
+  "sm": $icon-size-scale-sm,
+  "md": $icon-size-scale-md,
+  "lg": $icon-size-scale-lg,
+  "xl": $icon-size-scale-xl,
 ) !default;
 
+$border-color: var(--#{$prefix}grey-02);
+
 /* breadcrumb */
-$breadcrumb-margin-bottom: $mtvh-spacing-6;
+$breadcrumb-margin-bottom: 0;
 $breadcrumb-border-radius: none;
 $breadcrumb-item-padding-x: $mtvh-spacing-4;
 $breadcrumb-font-size: $font-size-xs;
@@ -147,7 +148,7 @@ $breadcrumb-active-color: var(--#{$prefix}black);
 $form-group-lg-margin-bottom: 3.5rem;
 $form-group-margin-bottom: 3rem;
 $form-text-margin-top: 0;
-$form-label-font-size : $font-size-md;
+$form-label-font-size: $font-size-md;
 $form-label-font-weight: 700;
 $form-label-color: var(--#{$prefix}black);
 $form-label-margin-bottom: $mtvh-spacing-3;
@@ -167,13 +168,13 @@ $input-border-radius: 0.25rem;
 $input-color: var(--#{$prefix}black);
 $input-placeholder-color: var(--#{$prefix}grey-06);
 
-$input-width-size-xxs : 64px;
-$input-width-size-xs : 80px;
-$input-width-size-sm : 96px;
-$input-width-size-md : 160px;
-$input-width-size-lg : 336px;
-$input-width-size-xl : 450px;
-$input-width-size-l : 420px;
+$input-width-size-xxs: 64px;
+$input-width-size-xs: 80px;
+$input-width-size-sm: 96px;
+$input-width-size-md: 160px;
+$input-width-size-lg: 336px;
+$input-width-size-xl: 450px;
+$input-width-size-l: 420px;
 
 /* form check */
 $form-check-bg-color: unset;
@@ -184,16 +185,16 @@ $form-check-min-height: 2.75rem;
 $form-check-margin-bottom: $mtvh-spacing-5;
 $form-check-input-checked-color: #fff;
 $form-check-padding-start: $form-check-input-width + 1rem;
-$form-check-input-checked-bg-color:       var(--#{$prefix}purple-04);
-$form-check-input-hover-bg-color:         var(--#{$prefix}purple-04);
-$form-check-input-checked-border-color:   var(--#{$prefix}purple-04);
-$form-check-input-focus-border:           var(--#{$prefix}purple-04);
-$form-check-input-focus-bg-color:         var(--#{$prefix}purple-04);
-$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='m6.813 13.492 9.9-9.848c.274-.275.587-.406.937-.393.35.012.663.156.938.43.274.275.412.587.412.937 0 .35-.137.661-.413.936l-10.8 10.784a1.313 1.313 0 0 1-1.912 0l-4.463-4.456c-.274-.274-.412-.587-.412-.936 0-.35.137-.662.413-.936.274-.275.587-.412.937-.412.35 0 .663.137.938.412l3.525 3.482Z'  fill='#{$form-check-input-checked-color}'/></svg>");
-$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
+$form-check-input-checked-bg-color: var(--#{$prefix}purple-04);
+$form-check-input-hover-bg-color: var(--#{$prefix}purple-04);
+$form-check-input-checked-border-color: var(--#{$prefix}purple-04);
+$form-check-input-focus-border: var(--#{$prefix}purple-04);
+$form-check-input-focus-bg-color: var(--#{$prefix}purple-04);
+$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='m6.813 13.492 9.9-9.848c.274-.275.587-.406.937-.393.35.012.663.156.938.43.274.275.412.587.412.937 0 .35-.137.661-.413.936l-10.8 10.784a1.313 1.313 0 0 1-1.912 0l-4.463-4.456c-.274-.274-.412-.587-.412-.936 0-.35.137-.662.413-.936.274-.275.587-.412.937-.412.35 0 .663.137.938.412l3.525 3.482Z'  fill='#{$form-check-input-checked-color}'/></svg>");
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
 $form-check-input-focus-box-shadow: "";
 $form-check-input-border: $border-width-xs solid var(--#{$prefix}grey-06);
-$form-check-wrapper-radio-invalid-border:  1px solid var(--#{$prefix}red-01);
+$form-check-wrapper-radio-invalid-border: 1px solid var(--#{$prefix}red-01);
 $form-select-indicator-color: var(--#{$prefix}black);
 $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
 
@@ -228,11 +229,11 @@ $stepper-breakpoint: "lg";
 
 $alert-border-radius: 8px;
 $banner-theme-colors: (
-  "success":    var(--#{$prefix}green-02),
-  "warning":    var(--#{$prefix}yellow-02),
-  "danger":     var(--#{$prefix}red-02),
-  "emergency":  var(--#{$prefix}red-04),
-  "dark":       var(--#{$prefix}black)
+  "success": var(--#{$prefix}green-02),
+  "warning": var(--#{$prefix}yellow-02),
+  "danger": var(--#{$prefix}red-02),
+  "emergency": var(--#{$prefix}red-04),
+  "dark": var(--#{$prefix}black),
 );
 
 $content-block-theme-colors: (
@@ -246,7 +247,7 @@ $content-block-theme-colors: (
   "white": var(--#{$prefix}white),
   "purple-01": var(--#{$prefix}purple-01),
   "purple-02": var(--#{$prefix}purple-02),
-  "stone-02": var(--#{$prefix}stone-02)
+  "stone-02": var(--#{$prefix}stone-02),
 );
 
 $content-block-theme-border: (
@@ -255,71 +256,70 @@ $content-block-theme-border: (
   "red-04": var(--#{$prefix}red-04),
   "green-04": var(--#{$prefix}green-04),
   "purple-04": var(--#{$prefix}purple-04),
-  "yellow-03": var(--#{$prefix}yellow-03)
+  "yellow-03": var(--#{$prefix}yellow-03),
 );
 
 $badge-themes: (
-  "primary" : (
-    "border" : transparent,
-    "background" :  var(--#{$prefix}blue-03),
-    "color" :  var(--#{$prefix}black),
+  "primary": (
+    "border": transparent,
+    "background": var(--#{$prefix}blue-03),
+    "color": var(--#{$prefix}black),
   ),
-  "secondary" : (
-    "border" :  transparent,
-    "background" : var(--#{$prefix}grey-05),
-    "color" : var(--#{$prefix}black),
-  )
-  ,
-  "success" : (
-    "border" : transparent,
-    "background" : var(--#{$prefix}green-03),
-    "color" : var(--#{$prefix}black),
+  "secondary": (
+    "border": transparent,
+    "background": var(--#{$prefix}grey-05),
+    "color": var(--#{$prefix}black),
   ),
-  "danger" : (
-    "border" : transparent,
-    "background" : var(--#{$prefix}red-03),
-    "color" : var(--#{$prefix}black),
+  "success": (
+    "border": transparent,
+    "background": var(--#{$prefix}green-03),
+    "color": var(--#{$prefix}black),
   ),
-  "warning" : (
-    "border" : transparent,
-    "background" : var(--#{$prefix}yellow-03),
-    "color" : var(--#{$prefix}black),
+  "danger": (
+    "border": transparent,
+    "background": var(--#{$prefix}red-03),
+    "color": var(--#{$prefix}black),
   ),
-  "info" : (
-    "border" : transparent,
-    "background" :var(--#{$prefix}purple-03),
-    "color" : var(--#{$prefix}black),
+  "warning": (
+    "border": transparent,
+    "background": var(--#{$prefix}yellow-03),
+    "color": var(--#{$prefix}black),
   ),
-  "danger-light" : (
-    "border" : transparent,
-    "background" : var(--#{$prefix}red-02),
-    "color" : var(--#{$prefix}black),
+  "info": (
+    "border": transparent,
+    "background": var(--#{$prefix}purple-03),
+    "color": var(--#{$prefix}black),
   ),
-  "outline-dark" : (
-    "border" : var(--#{$prefix}black),
-    "background" : transparent,
-    "color" : var(--#{$prefix}black),
+  "danger-light": (
+    "border": transparent,
+    "background": var(--#{$prefix}red-02),
+    "color": var(--#{$prefix}black),
   ),
-  "outline-success" : (
-    "border" : var(--#{$prefix}green-04),
-    "background" : var(--#{$prefix}white),
-    "color" : var(--#{$prefix}green-04)
+  "outline-dark": (
+    "border": var(--#{$prefix}black),
+    "background": transparent,
+    "color": var(--#{$prefix}black),
   ),
-  "outline-info" : (
-    "border" : var(--#{$prefix}purple-04),
-    "background" : var(--#{$prefix}white),
-    "color" : var(--#{$prefix}purple-04)
+  "outline-success": (
+    "border": var(--#{$prefix}green-04),
+    "background": var(--#{$prefix}white),
+    "color": var(--#{$prefix}green-04),
   ),
-  "outline-danger" : (
+  "outline-info": (
+    "border": var(--#{$prefix}purple-04),
+    "background": var(--#{$prefix}white),
+    "color": var(--#{$prefix}purple-04),
+  ),
+  "outline-danger": (
     "border": var(--#{$prefix}red-04),
-    "background" : var(--#{$prefix}white),
+    "background": var(--#{$prefix}white),
     "color": var(--#{$prefix}red-04),
   ),
-  "outline-light" : (
-    "border" : var(--#{$prefix}grey-06),
-    "background" : var(--#{$prefix}white),
-    "color" :  var(--#{$prefix}grey-06)
-  )
+  "outline-light": (
+    "border": var(--#{$prefix}grey-06),
+    "background": var(--#{$prefix}white),
+    "color": var(--#{$prefix}grey-06),
+  ),
 );
 
 $badge-border-radius: 0;
@@ -330,13 +330,13 @@ $badge-font-size: $mtvh-base-font-size;
 /* Notification */
 $notification-bg-color: $danger;
 $notification-text-color: var(--#{$prefix}white);
-$box-shadow:0 0.125rem 0.225rem rgba(0,0,0,0.12);
+$box-shadow: 0 0.125rem 0.225rem rgba(0, 0, 0, 0.12);
 
 /* pagination */
 $pagination-padding-x: 18px;
 $pagination-padding-y: 10px;
 $pagination-border-radius: 4px;
-$pagination-active-bg:  var(--#{$prefix}purple-04);
+$pagination-active-bg: var(--#{$prefix}purple-04);
 $pagination-active-color: var(--#{$prefix}white);
 $pagination-font-size: $font-size-sm;
 $pagination-focus-box-shadow: unset;

package/assets/scss/core/_all.scss

@@ -1,2 +1,2 @@
-@import 'iconography/icon';
-@import 'typography/typography';
+@import "iconography/icon";
+@import "typography/typography";

package/assets/scss/core/iconography/_icon.scss

@@ -1,32 +1,45 @@
-
 .mtvh-icon {
-
-  @each $mtvh-icon, $property-map in $mtvh-icons{
+  @each $mtvh-icon, $property-map in $mtvh-icons {
     &-#{$mtvh-icon} {
-      &:not(.mtvh-icon--right) { //default to use left position
-        @include mtvh-icon($icon: $mtvh-icon, $position: 'left', $width:  map-get($property-map, width),
-        $height: map-get($property-map, height), $svg-path:  map-get($property-map, svg-path));
+      &:not(.mtvh-icon--right) {
+        //default to use left position
+        @include mtvh-icon(
+          $icon: $mtvh-icon,
+          $position: "left",
+          $width: map-get($property-map, width),
+          $height: map-get($property-map, height),
+          $svg-path: map-get($property-map, svg-path)
+        );
         &.mtvh-icon--hover {
           @include hover-animate;
         }
       }
       &.mtvh-icon--right {
-        @include mtvh-icon($icon: $mtvh-icon, $position: 'right', $width: map-get($property-map, width),
-        $height: map-get($property-map, height), $svg-path:  map-get($property-map, svg-path));
+        @include mtvh-icon(
+          $icon: $mtvh-icon,
+          $position: "right",
+          $width: map-get($property-map, width),
+          $height: map-get($property-map, height),
+          $svg-path: map-get($property-map, svg-path)
+        );
         &.mtvh-icon--hover {
-          @include hover-animate($position: 'right');
+          @include hover-animate($position: "right");
+        }
+      }
+      &.m-0 {
+        &:after,
+        &:before {
+          margin-right: 0;
+          margin-left: 0;
         }
       }
-
     }
-
   }
 
   // create all sizes for the icons
   @each $size, $value in $mtvh-icon-sizes {
     &.mtvh-icon--#{$size} {
-      @include icon-size($value,$value);
+      @include icon-size($value, $value);
     }
   }
-
 }

package/assets/scss/core/typography/_typography.scss

@@ -1,7 +1,12 @@
 body {
   @include font-size($font-size-sm);
 }
-h1, h2, h3, h4, h5, h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
 .mtvh-h1,
 .mtvh-h2,
 .mtvh-h3,
@@ -11,25 +16,31 @@ h1, h2, h3, h4, h5, h6,
   margin: 0;
   padding: 0;
   font-family: var(--mtvh-font);
-  font-weight: var(--mtvh-font-bold);
+  font-weight: $mtvh-font-weight-bold;
 }
 
-h1, .mtvh-h1 {
+h1,
+.mtvh-h1 {
   @extend %h1;
 }
 .mtvh-title-h1 {
   @extend %h1;
   @extend %parent-title-h1;
-
 }
-
-h2, .mtvh-h2 {
+.mtvh-child-title-h1 {
+  @extend %h1;
+  @extend %child-title-h1;
+}
+h2,
+.mtvh-h2 {
   @extend %h2;
 }
-h3, .mtvh-h3 {
+h3,
+.mtvh-h3 {
   @extend %h3;
 }
-h4, .mtvh-h4 {
+h4,
+.mtvh-h4 {
   @extend %h4;
 }
 p {
@@ -43,16 +54,27 @@ p {
   display: block;
 }
 
+%child-title-h1 {
+  margin-bottom: $mtvh-spacing-5;
+  margin-top: $mtvh-spacing-5;
+  display: block;
+  @include media-breakpoint-down("sm") {
+    font-size: 2.125rem;
+    line-height: 1.3;
+  }
+}
+
 %parent-title-h1 {
-  @include media-breakpoint-up('md') {
+  margin-top: $mtvh-spacing-5;
+  @include media-breakpoint-up("md") {
     font-size: 3.25rem;
   }
 }
 
 %h2 {
   margin-bottom: 1rem;
-  font-size: 2rem;
-  line-height: 1.25;
+  font-size: 1.875rem;
+  line-height: 1.3;
   display: block;
 }
 
@@ -70,7 +92,7 @@ p {
   display: block;
 }
 
-%p  {
+%p {
   margin-bottom: 1rem;
   display: block;
   font-size: $font-size-sm;
@@ -89,9 +111,7 @@ p {
 }
 
 a {
-  font-weight: bold;
-  outline-color:  var(--mtvh-btn-outline-color);
-
+  outline-color: var(--mtvh-btn-outline-color);
   &:focus-visible {
     border-radius: var(--mtvh-link-border-radius);
     outline: var(--mtvh-btn-outline-border) solid;
@@ -99,14 +119,12 @@ a {
 }
 
 ul,
-ol,
- {
+ol {
   margin: 0 0 1rem 0;
   padding-right: 0;
   padding-left: 1.75rem;
 }
 
-
 ul,
 ol {
   li {