feat(FE): extract base styles of heading into class

Author: Manuel Proß

web/src/styles/_text.scss

@@ -1,55 +1,55 @@
-.h1 {
-    font-size: clamp(3rem, 5vw, 5rem);
-    @apply font-[400] text-secondary ml-2;
+.heading {
+    @apply font-[400] text-secondary;
 
     &::before {
         content: '>_ ';
     }
+
+    @screen sm {
+        @apply mb-5;
+    }
+
+    @screen md {
+        @apply mb-6;
+    }
+
+    @screen lg {
+        @apply mb-7;
+    }
+
+    @screen xl {
+        @apply mb-8;
+    }
+}
+
+.h1 {
+    @extend .heading;
+    font-size: clamp(3rem, 5vw, 5rem);
 }
 
 .h2 {
+    @extend .heading;
     font-size: clamp(2rem, 4vw, 4rem);
-    @apply font-[400] text-secondary ml-2;
-
-    &::before {
-        content: '>_ ';
-    }
 }
 
 .h3 {
+    @extend .heading;
     font-size: clamp(1.75rem, 3.5vw, 3rem);
-    @apply font-[400] text-secondary ml-2;
-
-    &::before {
-        content: '>_ ';
-    }
 }
 
 .h4 {
+    @extend .heading;
     font-size: clamp(1.5rem, 3vw, 2.5rem);
-    @apply font-[400] text-secondary ml-2;
-
-    &::before {
-        content: '>_ ';
-    }
 }
 
 .h5 {
+    @extend .heading;
     font-size: clamp(1.5rem, 2.5vw, 1.75rem);
-    @apply font-[400] text-secondary ml-2;
-
-    &::before {
-        content: '>_ ';
-    }
 }
 
 .h6 {
+    @extend .heading;
     font-size: clamp(1.5rem, 2vw, 1.25rem);
-    @apply font-[400] text-secondary ml-2;
-
-    &::before {
-        content: '>_ ';
-    }
 }
 
 ul.list li {