{{- $service := .service }}
{{- $content := .content }}
{{- $odd := .odd }}
{{- $id := "service"}}
{{if $service.id}}
    {{- $id = $service.id}}
{{else if .id}}
    {{- $id = .id }}
{{end}}
<div id="{{$id}}" class="section {{if eq $odd 0}} section-even {{end}} row">
    <div class="section-content services">
        {{if and ($service.image) (eq $service.image.direction "left")}}
        <div class="service-icon-container col-5">
            <img class="service-icon" src="{{ $service.image.url }}" alt="{{ $service.image.alt }}">
        </div>
        {{end}}
        <div class="service-description {{if $service.image}} col-7 {{end}}">
            {{ with $service.title }}
              <div class="title">
                <h1 class="content-title">{{ . }}</h1>
                <div class="divider"></div>
              </div>
            {{ end }}
            <p>{{ $content }}</p>
            <br />
            {{ if $service.button }}
                {{- range $service.button }}
                    {{ partial "components/button.html" . }}
                {{- end }}
            {{ end }}
        </div>
        {{if and ($service.image) (eq $service.image.direction "right")}}
        <div class="service-icon-container col-5">
            <img class="service-icon" src="{{ $service.image.url }}" alt="{{ $service.image.alt }}">
        </div>
        {{end}}
    </div>
</div>