Refactor columns shortcode to use markdownify for consistent HTML output, Add new mdcolumns shortcode to convert markdown column content to HTML, Remove unnecessary comments and reformat code

themes/hugoplate/layouts/shortcodes/section.html

@@ -1,24 +1,9 @@
+{{ with .Get "background-image" }}
+<img src="{{ . }}" class="w-full h-full object-cover hide-on-desktop" style="margin-top:0!important" />
+{{ end }}
 <section class="bg-cover items-center pt-32 pb-32 {{ with .Get "light-text" }}light-text {{ end }} {{ with .Get "classes" }} {{ . }} {{ end }}" style="{{ with .Get "fixed" }}background-attachment: fixed;{{ end }}{{ with .Get "background-image" }}background-image: url('{{ . }}');{{ else }} background-color:{{ .Get "background-color" | safeCSS }}{{ end }}">
 {{ with .Get "title" }}<h1 class="font-bold text-center text-white" style="font-family: 'MontserratVar' !important;font-weight: 700;text-shadow: 0px 0.5px 12px rgba(0, 0, 0, 0.9);">{{ . | markdownify }}</h1>{{ end }}
 <div class="container items-center py-20" style="{{ with .Get "background-color" }}background-color: {{ . | safeCSS }}{{ end }}" >    
 {{ .Inner }}
 </div>
 </section>   
-
-{{/*  
-
-    This shortcode is a wrapper for a section component. It has a default class of "text-gray-700 bg-white" but can be overridden by passing a class attribute.
-
-    Attributes: 
-    1. title
-    2. background-color
-    3. background-image
-    4. light-text
-    5. fixed
-    6. classes
-
-    Usage:
-    {{< section title="This is a section" background-color="#f5f5f5" background-image="https://source.unsplash.com/random/1920x1080" light-text="true" fixed="true" classes="text-center" >}}
-    This is the content of the section
-    {{< /section >}}
-*/}}