{{- $id := .id }}
{{- $type := print "sections/" .type }}
{{- $config := index site.Data.sections $id }}
{{- $parallax := cond $config.parallax " parallax" "" -}}

<section id="{{ $id }}">
    {{- with $config.background.image }}
    {{- $backgroundScale := $config.background.scale | default 1 -}}
    <img class="section-background-image{{ $parallax }}" src="{{ . }}" style="transform: scaleY({{ $backgroundScale }})" />
    {{- end }}

    {{- with $config.background.colorFrom -}}
    <div class="section-background-color"
        style="background-image: linear-gradient(to bottom, {{ $config.background.colorFrom | safeCSS }}, {{ $config.background.colorTo | safeCSS }})">
    </div>
    {{- end }}

    {{- with $config.video -}}
    <div class="section-video-container{{ $parallax }}">
        <video src="{{ . }}" autoplay loop muted></video>
    </div>
    {{- end -}}

    <div id="{{ $id }}-centered-container">
        {{- with $config.topRibbon }}
        {{- partial "ribbon" (dict "ribbon" $config.topRibbon) }}
        {{- end -}}

        {{ partial $type (dict "id" $id "config" $config) }}
        
        {{- with $config.bottomRibbon }}
        {{- partial "ribbon" (dict "ribbon" $config.bottomRibbon) }}
        {{- end -}}
    </div>
</section>