Best practice for wrapping markdown in custom components with their own sub layout

[Monokai]

I'm looking for some points on how to wrap markdown in custom components so that they have their own layout and substitution rules. An example of an mdsvex file:

---
title: Header 1
layout: project
---
<script>
  import CustomComponent from '@components/CustomComponent.svelte';
</script>

## Header 2

A first paragraph with text

<CustomComponent>
### Header 3

A second paragraph with text
</CustomComponent>

I give a custom layout to the mdsvex parser where I substitute certain html tags for custom components. So h2, h3 and p tags gets transformed in custom Svelte components.

I do this via a layout file:

import h2 from '@components/h2.svelte';
import h3 from '@components/h3.svelte';
import p from '@components/p.svelte';

export { h2, h3, p }

And pass this file to the mdsvex config:

mdsvex({
  extensions: ['.svx', '.mdx', '.md'],
  layout: {
    'project': 'src/routes/project/+layout.svelte',
  },
})

How can I substitute the second paragraph with another Svelte component than the first paragraph?

Or maybe more generally: how do I organize my markdown so that certain pieces of markdown text are wrapped in a custom component with different substitution rules than their parent layout?