{{ range . }}
<div class="w-screen py-2 mx-auto {{ .bgColor}}">
  <div
    class="w-full mx-auto max-w-[1200px] my-10 md:my-20 flex md:flex-row flex-col justify-center items-center p-0 md:px-6">
    {{/* Image on Left */}}
    <div
      class="md:w-1/2 mx-auto px-8 sm:px-0 {{if .leftImg}}order-0{{else if .customOrder}}{{.customOrder}} {{else}} order-1{{end}} relative">
      {{if .customBorder}}
      <div
        class="inline-block relative  h-full before:border-[1px] before:border-[#e84e63] before:absolute before:w-full before:h-full before:bottom-4 before:left-4">
        {{end}}
        {{ $imgClass := "w-fit md:max-w-[650px] lg:max-w-[500px]" }}
        {{ if not .noShadow }}
        {{ $imgClass = (print $imgClass " shadow-2xl") }}
        {{ end }}
        {{ if .leftImg }}
        {{ $imgClass = (print $imgClass " lg:ml-auto") }}
        {{ else }}
        {{ $imgClass = (print $imgClass " lg:mr-auto") }}
        {{ end }}
        {{ $context := (dict
        "context" .
        "Destination" (print "/assets/images/" .img)
        "Text" .alt
        "Class" (print $imgClass)
        )}}
        {{- partial "compressed-image.html" $context }}
        {{if .customBorder}}
      </div>{{end}}
    </div>
    <div class="md:w-1/2 {{if .leftImg}}md:pl-20{{else}} md:pr-20{{end}} px-6 pb-8 md:pb-0">
      <h2 class="md:mt-0 text-center md:text-left ">{{ .headline | markdownify}}</h2>
      {{ .text | markdownify}}
      {{partial "render-content" .sections}}
      {{if .list}}
      <ul>
        {{range .}}
        <li>{{.}}</li>
        {{end}}
      </ul>
      {{end}}
    </div>
    {{/* Default Image on Right */}}
  </div>
</div>
{{ end }}