{{ define "content" }}

<section class="section m-0 p-0">
    <div class="columns p-0 m-0">
        <div class="column p-0 m-0 pl-6 is-flex is-align-items-center has-background-black has-text-white" style="height: 20vh;">
            <h1 class="title is-size-1 has-text-weight-bold">{{ .Title }} </h1>
        </div>
        <div class="column is-2 m-0 has-background-warning-light is-hidden-mobile">
        </div>
    </div>
</section>

{{ range .Pages }}
<section class="section m-0 p-0 has-background-warning-light">
    <div class="columns m-0 p-0">
        {{ $img := (resources.Match (print .File.Dir "/*")).ByType "image" }}
        {{ if eq .Params.position "left" }}
        <div class="column is-four-fifths p-5">
            <p class="mb-6">{{ .Title }}</p>
            <div class="columns is-multiline is-mobile is-justify-content-center">
                {{ range $img }}
                {{- $jpeg := .Resize "600x jpeg" }}
                {{- $webp := .Resize "600x webp text" }}
                <div class="column  is-one-quarter-mobile is-2-tablet p-1">
                    <figure class="image">
                        <picture>
                            <source srcset="{{ $webp.Permalink }}" type="image/webp">
                            <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Permalink }}">
                        </picture>
                    </figure>
                </div>
                {{ end }}
            </div>
        </div>
        <div class="column m-0 p-0 has-background-black is-hidden-mobile">
        </div>

        {{ else }}
        <div class="column has-background-black is-hidden-mobile">
        </div>
        <div class="column is-four-fifths p-5 has-background-warning-light">
            <p class="mb-6">{{ .Title }}</p>
            <div class="columns is-multiline is-mobile">
                {{ range $img }}
                {{- $jpeg := .Resize "600x jpeg" }}
                {{- $webp := .Resize "600x webp text" }}
                <div class="column is-one-quarter-mobile is-2-tablet p-1">
                    <figure class="image">
                        <picture>
                            <source srcset="{{ $webp.Permalink }}" type="image/webp">
                            <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Permalink }}">
                        </picture>
                    </figure>
                </div>
                {{ end }}
            </div>
        </div>        
        {{end}}
    </div>
</section>
{{end }}
{{ end }}