update a lot of change since a while

app/components/section/SectionTitle.vue

@@ -0,0 +1,56 @@
+<template>
+  <DsHeading
+    as="h1"
+    :tone="tone"
+    :class="[
+      `section-title`,
+      `section-title--pad-${pad}`
+    ]"
+  >
+    <slot />
+  </DsHeading>
+</template>
+
+<script setup>
+    import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+    defineProps({
+        as: { type: String, default: 'h2' },
+        tone: { type: String, default: 'default' },
+        pad: { type: String, default: 'sm' }, // xs, sm, md, lg
+    })
+</script>
+
+<style lang="scss">
+    .section-title {
+
+
+      &--pad-xs {
+        padding-top: var(--sp-32);
+        padding-bottom: var(--sp-16);
+        padding-left: var(--sp-45);
+      }
+      &--pad-sm {
+        padding-top: var(--sp-48);
+        padding-bottom: var(--sp-48);
+        padding-left: var(--sp-45);
+      }
+      &--pad-md {
+        padding-top: var(--sp-80);
+        padding-bottom: var(--sp-180);
+        padding-left: var(--sp-45);
+      }
+      &--pad-lg {
+        padding-top: var(--sp-80);
+        padding-bottom: var(--sp-180);
+        padding-left: var(--sp-45);
+      }
+    }
+
+    @media (max-width: 300px) {
+        .section-title {
+            padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
+        }
+    }
+
+
+</style>