{{ define "main" }}
<img src="/images/front-wallpaper.svg" class="front-background">
<main class="homepage container py-6">
    <div class="hero row pt-3 pt-md-6">
        <div class="col-12 col-md-6 d-flex flex-column justify-content-center text-center text-md-left">
            <div>
                <h1 class="display-4">{{ .Site.Title }}</h1>
                {{- with .Site.Params.description -}}
            </div>
            <div>
                <h3 class="font-weight-normal">{{ . | safeHTML }}</h3>
                {{- end -}}
            </div>
        </div>
        <div class="col-0 col-md-6 d-flex">
            {{- with .Site.Params.homepageImage -}}
            {{/*  <div class="homepage-image" data-aos="zoom-in">  */}}
            <div class="homepage-image d-none d-sm-block">
                <img data-src="{{ . | relURL }}" class="img-fluid">
            </div>
            {{- end -}}
        </div>
    </div>
    <div class="row">

        <!-- Latest article -->
        {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
        <!-- <div class="latest row py-lg-5"> -->
        <div class="latest row py-lg-5">
            {{ .Render "card-large" }}
        </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>
    <div class="row">
        <div class="col d-flex justify-content-center text-center">
            <a href="/post">
                <button type="button" class="btn btn-lg btn-outline-primary">See all posts</button>
            </a>
        </div>
    </div>

</main>
{{ end }}