{{- $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-4">
            <img class="service-icon" src="{{ $service.image.url }}" alt="{{ $service.image.alt }}">
        </div>
        {{end}}
        <div class="service-description {{if $service.image}} col-8 {{end}}">
            <div class="title">
                <h1 class="content-title">{{ $service.title }}</h1>
                <div class="divider"></div>
            </div>
            <p>{{ $content }}</p>
            {{if and ($service.button) ($service.button.visible)}}
            <a class="service-button" href="{{ $service.button.url }}">{{ $service.button.text }}</a>
            {{end}}
        </div>
        {{if and ($service.image) (eq $service.image.direction "right")}}
        <div class="service-icon-container col-4">
            <img class="service-icon" src="{{ $service.image.url }}" alt="{{ $service.image.alt }}">
        </div>
        {{end}}
    </div>
</div>