{{- $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>
            {{if $hero.button.visible}}
            <a class="hero-button" href="{{ $hero.button.url }}">{{ $hero.button.text }}</a>
            {{end}}
        </div>
        <div class="hero-icon-container col-7">
            <img class="service-icon" alt="{{ $hero.image.alt }}" src="{{ $hero.image.url }}">
        </div>
    </div>
</div>