update a lot of change since a while

app/components/section/SectionContent.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    :class="[
+      `section-content`,
+      `section-content--tone-${tone}`,
+      `section-content--pad-${pad}`
+    ]"
+  >
+    <slot />
+</div>
+</template>
+
+<script setup>
+    defineProps({
+        as: { type: String, default: 'h2' },
+        tone: { type: String, default: 'default' },
+        pad: { type: String, default: '' }, // xs, sm, md, lg
+    })
+</script>
+
+<style lang="scss">
+    .section-content {
+
+      &--tone-default { background: transparent; }
+      &--tone-brand { background: var(--c-brand_rouge); }
+      &--tone-brand_rouge45 { background: var(--c-brand_rouge45); }
+      &--tone-muted { background: var(--c-brand_rouge-weak); }
+      &--tone-dark { background: var(--c-backgroud-black); }
+      &--tone-brandreverse { background: var(--c-backgroud-brandreverse); }
+
+      &--pad-xs {
+        padding-top: var(--sp-32);
+        padding-bottom: var(--sp-16);
+        padding-left: var(--sp-45);
+      }
+      &--pad-sm {
+        padding-top: var(--sp-32);
+        padding-bottom: var(--sp-16);
+        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>