Columns, rows and gutter in Bootstrap 5 and Hugo

I use Bootstarp 5 and Hugo for a website. I want to set the column size in the test.md file. For example, I want a col-8 in the left column and col-4 in the right column. I have created two shortcodes. row.html and column.html

I would like to use a gutter of 1rem for the spacing of the columns and rows. I don't know how to program the gutter to separate the individual columns and rows. Please have a look at the screenshot.

test.md

---title: "Test"description: "Test"draft: falsemenu:    main:        weight: 2---{{< row >}}{{< column col-8 >}}# Heading h1---Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.## Heading h2Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.{{< /column >}}{{< column col-4 >}}# Heading h1Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.## Heading h2Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.{{< /column >}}{{< column col-8 >}}# Heading h1---Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.## Heading h2Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.{{< /column >}}{{< column col-4 >}}# Heading h1Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.{{< /column >}}{{< /row >}}

single.html

{{ define "main" }}<div class="container"><div class="row"><div class="col mb-auto mt-4 pt-5 px-4">            {{ .Content | markdownify }}</div></div></div>{{ end }}

row.html

{{ $class := "row" }}{{ with (.Get 0) }}{{ $class = printf "%s %s" $class . }}{{ end }}<div class="{{ $class }}">    {{ .Inner | .Page.RenderString }}</div>

column.html

{{- $class := "col border rounded" }}{{- with (.Get 0) }}{{- $class = printf "%s %s" $class . }}{{- end }}<div class="{{ $class }}">    {{ .Inner | .Page.RenderString }}</div>