extend h1-6 with .h1-6

src/scss/_base.scss

@@ -44,3 +44,17 @@ body {
   color: $color-body;
   background-color: $background-color;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	@include font-title();
+}
+
+a,
+button {
+	@include font-link();
+}

src/scss/_reset.scss

@@ -1,71 +1,77 @@
 // based on https://github.com/hankchizljaw/modern-css-reset
-/* Box sizing rules */
-*,
-*::before,
-*::after {
+    /* Box sizing rules */
+    *,
+    *::before,
+    *::after {
       box-sizing: border-box;
-}
+    }
 
-/* Remove default padding */
-ul,
-ol {
+    /* Remove default padding */
+    ul,
+    ol {
       padding: 0;
       list-style: none;
-}
+    }
 
-/* Remove default margin */
-body,
-h1,
-h2,
-h3,
-h4,
-p,
-ul,
-ol,
-figure,
-blockquote,
-dl,
-dd {
+    /* Remove default margin */
+    body,
+    h1,
+    h2,
+    h3,
+    h4,
+    p,
+    ul,
+    ol,
+    figure,
+    blockquote,
+    dl,
+    dd {
       margin: 0;
-}
+    }
 
-/* Set core root defaults */
-html {
+    /* Set core root defaults */
+    html {
       scroll-behavior: smooth;
-}
+    }
 
-/* Set core body defaults */
-body {
+    /* Set core body defaults */
+    body {
       min-height: 100vh;
       text-rendering: optimizeSpeed;
       line-height: 1.5;
-}
+    }
 
-/* Make images easier to work with */
-img {
+		a {
+			text-decoration: none;
+		}
+
+    /* Inherit fonts for inputs and buttons */
+    input,
+    button,
+    textarea,
+    select {
+      font: inherit;
+    }
+
+    /* Make images easier to work with */
+    img {
       max-width: 100%;
       display: block;
-}
 
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
-	font: inherit;
-}
-
-/* Blur images when they have no alt attribute */
-img:not([alt]) {
+			/* Blur images when they have no alt attribute */
+			&:not([alt]) {
 				filter: blur(10px);
-}
+			}
+    }
 
-/* Remove all animations and transitions for people that prefer not to see them */
-@media (prefers-reduced-motion: reduce) {
+    /* Remove all animations and transitions for people that prefer not to see them */
+    @media (prefers-reduced-motion: reduce) {
       * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
       }
-}
+    }
+
+

src/scss/style.scss

@@ -3,3 +3,27 @@
 @import "typography";
 @import "base";
 @import "layout";
+
+.h1 {
+	@extend h1;
+}
+
+.h2 {
+	@extend h2;
+}
+
+.h3 {
+	@extend h3;
+}
+
+.h4 {
+	@extend h4;
+}
+
+.h5 {
+	@extend h5;
+}
+
+.h6 {
+	@extend h6;
+}