{{ define "styles"}}
<style>
#text-box {
    height: 40vh;
}
@media screen and (max-width: 768px) {
    #text-box {
        height: auto;
    }
}
</style>
{{ end }}


{{ define "content" }}

<section class="section has-background-warning-light">
        <h1 class="title is-size-1 has-text-weight-bold has-text-centered">{{ .Title }}</h1>
</section>
<section class="section has-background-primary-dark">
    <div class="container has-text-black">
        <p>{{ .Content }}</p>
    </div>
</section>
<section class="section has-background-black">
    <h2 class="subtitle has-text-white has-text-centered pb-3">{{ .Params.Subtitle }}</h2>
    {{ range .Pages }}
    <div class="columns">
        <div class="column  is-flex is-half has-background-black">
            <div id="text-box" class="box has-background-warning-light has-text-centered pt-3">
                <h2 class="subtitle mb-3">{{ .Title }}</h2>
                <div class="block">{{ .Content }}</div>
            </div>
        </div>
        <div class="column is-half has-background-black">
            <div class="box has-background-warning-light is-flex is-flex-direction-column is-justify-content-center" style="height: 40vh;">
                {{ $img := resources.GetMatch (print .File.Dir "/illustration.*") }}
                {{ with $img }}
                {{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
                {{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
                <figure class="image is-flex is-justify-content-center"  style="max-width: 100%; max-height: 100%; width: auto;">
                    <picture>
                        <source srcset="{{ $webp.Permalink }}" type="image/webp">
                        <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}"  alt="{{ .Permalink }}"  style="max-width: 100%; max-height: 100%; width: auto;">
                    </picture>
                </figure>
                {{ end }}
            </div>
        </div>  
    </div>
    {{ end}}
</section>

{{ end }}