<template>
  <div class="page-section" :class="`divider-${divider}`">
    <slot />
  </div>
</template>

<script setup>
defineProps({
  divider: { type: String, default: 'none' }, // "top" | "bottom" | "none"
})
</script>

<style scoped>
.page-section {
  padding: var(--page-pad-x) var(--page-pad-x);
}
.page-section.divider-top {
  border-top: 1px dashed var(--border);
}
.page-section.divider-bottom {
  border-bottom: 1px dashed var(--border);
}
</style>
