{{- $hero := .hero }}
{{- $content := .content }}
{{- $color := .color }}
{{- $odd := .odd }}
{{- $id := "hero"}}
{{if $hero.id}}
    {{- $id := $hero.id}}
{{else if .id}}
    {{- $id := .id }}
{{end}}
{{ $template := resources.Get "scss/hero.scss" }}
{{ if $template }}
{{ $index := $template | resources.ExecuteAsTemplate "css/hero.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
<link rel="stylesheet" type="text/css" href="{{ $index.RelPermalink }}">
{{ end }}
<div id="{{ $id }}" class="section {{if eq $odd 0}} section-even {{end}} row hero">
    <div class="section-content services">
        <div class="hero-description col-5">
            <div class="title">
                <h1 class="content-title">{{ $hero.title }}</h1>
                <div class="divider"></div>
            </div>
            <p>{{ $content }}</p>
            <br />
            {{ with $hero.button }}
                {{- range .}}
                    {{ partial "components/button.html" . }}
                {{- end }}
            {{ end }}
        </div>
        <div class="hero-icon-container col-7">
            <img class="service-icon" alt="{{ $hero.image.alt }}" src="{{ $hero.image.url }}">
        </div>
    </div>
</div>