{{ define "ComponentContent" }}
<div
    class="flex w-full h-full flex-col md:flex-row {{ if eq .SideSwitch true }} md:flex-row-reverse flex-col {{ end }}">
    {{ if ne .Image "" }}
    <div class="w-1/1 md:w-1/2">
        <img class="w-full md:h-full object-contain md:object-none rounded" src="{{ .Image }}" alt="content-image"
            loading="lazy">
    </div>
    {{ end }}
    <div class="w-full {{ if ne .Image "" }} w-1/1 md:w-1/2 {{ end }} px-2 sm:px-6">
        <div class="flex flex-col h-full space-y-4 justify-center items-center">
            {{ if ne .Title "" }}
            <div class="w-full text-4xl font-semibold">{{ .Title }}</div>
            {{ end }}
            {{ if ne .Subtitle "" }}
            <div class="w-full text-xl">{{ .Subtitle }}</div>
            {{ end }}
            {{ if ne .Description "" }}
            <div class="w-full text-gray-700">{{ .Description }}</div>
            {{ end }}
            {{ if .Links }}
            <div class="w-full flex flex-wrap {{ if .CenterLinks }} justify-center {{ else }} justify-start {{ end }}">
                {{ range .Links }}
                <a href="{{ .Href }}" class="mr-4 text-blue-700">{{ .Title }}</a>
                {{ end }}
            </div>
            {{ end }}
        </div>
    </div>
</div>
{{ end }}