{{ define "main" }}
<div class="flex-row">
    <div class="flex-1">
        <div class="m-t-20 m-b-20 m-auto p-20 max-w-600">
            <h1 class="title">
                <span class="primary">{{ .Site.Params.Section1.BaselinePart1 }}</span>
                <span class="secondary">{{ .Site.Params.Section1.BaselinePart2 }}</span>
            </h1>
            <p>
                {{ replace .Site.Params.Section1.Description .Site.Title ( print "<span class=\"brand\">" .Site.Title "</span>" ) | safeHTML }}
            </p>
            {{ $bubbles := resources.Get .Site.Params.Section1.Image }}
            <img class="w-full"  src="{{ $bubbles.Permalink }}">
        </div>
    </div>
    <div class="featuredimage w-400">
        {{ $img := resources.Get .Site.Params.FeaturedImage }}
        <img class="w-600" style="margin-top: -100px" src="{{ $img.Permalink }}">
    </div> 
</div>
<div class="bg-primary reverse w-full">
    <h1 class="container ta-c p-t-20">{{ .Site.Params.Section2.Title }}</h1>
    <div class="container flex-row wrap">
        {{ range .Site.Params.Section2.List }}
            <div class="flex-1 m-30 min-w-200">
                <div class="w-100 h-100 m-auto bg-{{ .color }} bg-bubble icon-bubble">
                    {{ $icon := resources.Get ( print "images/icons/" .icon ".svg") }}
                    <img src="{{ $icon.Permalink }}" />
                </div>
                <h2 class="ta-c">{{ .title }}</h2>
                <p class=" ta-j">{{ .text }}</p>
            </div>
        {{ end }}
    </div>
</div>
<div class="p-30">
    <h1 class="container ta-c brandblue">{{ .Site.Params.Section3.Title }}</h1>
    {{ range .Site.Params.Section3.List }}
        <div class="container flex-row ai-center {{ if (eq .side "right") }} direction-row-reverse{{end}}">
            <div class="bg-{{.color}} bg-bubble icon-bubble w-75 h-75 m-20">
                {{ $icon := resources.Get ( print "images/icons/" .icon ".svg") }}
                <img src="{{ $icon.Permalink }}" />
            </div>
            <div class="flex-1 max-w-500">
                <h3 class="m-b-0 {{.color}} {{ if (eq .side "right") }} ta-r{{end}}">{{.title}}</h3>
                <p class="m-t-0 ta-j">{{.description}}</p>
            </div>
        </div>
    {{ end }}
</div>
<div class="bg-secondary p-20" id="section4">
    <h1 class="container ta-c white p-20">{{ .Site.Params.Section4.Title }}</h1>
    <div class="container flex-row wrap j-center">
        {{ $projects := where .Site.RegularPages.ByDate "Type" "in" .Site.Params.Section4.projectsPages }}
        {{ range $projects }}
        <a href="{{.Permalink}}">
            <div class="m-20 w-125 h-125 bg-primary bg-bubble white flex-row ai-center j-center">
                {{ if (not (isset .Params "image")) | or (eq .Params.image "") }}
                <p class="brand cap ta-c">{{.Title}}</p>
                {{else}}
                {{ $img := resources.Get .Params.image }}
                <img class="max-w-100 max-h-100" src="{{$img.Permalink}}" alt="{{.Title}}" />
                <!-- <p class="brand cap ta-c">{{.Title}}</span> -->
                {{end}}
            </div>
        </a>
        {{ end }}
        

    </div>
    <div class="container flex-row wrap j-center">
        {{ $references := where .Site.RegularPages.ByDate "Type" "in" .Site.Params.Section4.referencesPages }}
        {{ range $references }}
        <a href="{{.Permalink}}">
            <div class="m-20 w-125 h-125 bg-white bg-bubble brandblue flex-row ai-center j-center">
                {{ if (not (isset .Params "image")) | or (eq .Params.image "") }}
                <p class="brand cap ta-c">{{.Title}}</p>
                {{else}}
                {{ $img := resources.Get .Params.image }}
                <img class="max-w-100 max-h-100" src="{{$img.Permalink}}" alt="{{.Title}}" />
                <!-- <p class="brand cap ta-c">{{.Title}}</span> -->
                {{end}}
            </div>
        </a>
        {{ end }}
    </div>
</div>
{{ end }}