{{ define "main" }}
{{ .Scratch.Set "IsSingle" true }}
<!-- <main class="homepage container py-6" id="front-background"> -->
<img src="/images/front-wallpaper.svg" class="front-background">
<main class="homepage container py-6">
    <div>
        <!-- Hero -->
        <div class="hero row">
            {{ .Scratch.Get "IsSingle" }}
            <div class="col position-relative py-lg-7{{ if not .Site.Params.homepageImage }} py-7{{ else }} pb-5{{ end }}">
                {{- with .Site.Params.homepageImage -}}
                {{/*  <div class="homepage-image" data-aos="zoom-in">  */}}
                <div class="homepage-image">
                    <img data-src="{{ . | relURL }}" class="img-fluid">
                </div>
                {{- end -}}

                <h1 class="display-4">{{ .Site.Title }}</h1>
                {{- with .Site.Params.description -}}
                <h3 class="font-weight-normal" style="max-width: 50%;">{{ . | safeHTML }}</h3>
                {{- end -}}
            </div>
        </div>

        <!-- Latest article -->
        {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
        {{ $page := . }}
        <div class="latest row py-lg-5">
            <div class="col-lg-6 mb-3">
                {{- with .Resources.Match "images/banner.svg" -}}
                {{ range . }}
                {{- $image := . -}}
                <a href="{{ $page.RelPermalink }}" class="d-block">
                    <img data-src="{{ $image.RelPermalink }}" class="img-fluid rounded" alt="{{ $page.Title }}" data-aos="zoom-in">
                </a>
                {{- end -}}
                {{- end -}}
            </div>
            <div class="col-lg-6 mb-3">
                <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
                <h2><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>

                <div class="content">
                    {{ $page.Summary }}
                </div>
            </div>
        </div>
        {{- end -}}

        <!-- Articles -->
        <div class="articles row row-cols-1 row-cols-lg-3">
            {{ range after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
            <div class="col mb-3" data-aos="zoom-in">
                {{ .Render "card" }}
            </div>
            {{ end }}
        </div>
    </div>
</main>
{{ end }}