{{ define "main" }}
<section class="section-header">
    <div class="columns-container" style="display: flex" >
        <div class="column col1 text-center vertical-center">
            <br>
            <h1 class="flex flex-center fill-width larger"><img src="/img/icon.png" class="icon-twice-text" alt="Ad5001's icon"/>Ad5001</h1>
            {{ .Params.Description | markdownify }}
            <div class="grid flex-center">&nbsp;
                {{ range .Params.Links }}
                <div>
                    <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
                        <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
                    </a>&nbsp;
                </div>
                {{ end }}
            </div>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>
</section>
<section style="" class="section-skewed">
    <h1 class="text-center">Software commitments</h1>
    <div class="columns-container padding-container-3" >
        <div class="column col3 vertical-center padding-container">
            <div class="card blue topleft2bottomright padding-container text-content">
                <h2 class="flex flex-center text-center">
                    <img src="/icons/free.svg" class="icon-larger2-text icon-monochrome" alt="Free (as in freedom) icon"/>
                    {{ .Params.Cards.FLOSS.Title }}
                </h2>
                <p>
                    {{ .Params.Cards.FLOSS.Description | markdownify }}
                </p>
                <br>
                <div class="grid flex-center">&nbsp;
                    {{ range .Params.Cards.FLOSS.Links }}
                    <div>
                        <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
                            <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
                        </a>&nbsp;
                    </div>
                    {{ end }}
                </div>
            </div>
        </div>
        <div class="column col3 vertical-center padding-container">
            <div class="card purple top2bottom padding-container text-content">
                <h2 class="flex flex-center text-center">
                    <img src="/icons/privacy.svg" class="icon-larger2-text icon-monochrome" alt="Privacy icon"/>
                    {{ .Params.Cards.Privacy.Title }}
                </h2>
                <p>
                    {{ .Params.Cards.Privacy.Description | markdownify }}
                </p>
                <br>
                <div class="grid flex-center">&nbsp;
                    {{ range .Params.Cards.Privacy.Links }}
                    <div>
                        <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
                            <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
                        </a>&nbsp;
                    </div>
                    {{ end }}
                </div>
            </div>
        </div>
        <div class="column col3 vertical-center padding-container">
            <div class="card yellow topright2bottomleft padding-container text-content">
                <h2 class="flex flex-center text-center">
                    <img src="/icons/platforms.svg" class="icon-larger2-text icon-monochrome" alt="Privacy icon"/>
                    {{ .Params.Cards.Platforms.Title }}
                </h2>
                <p>
                    {{ .Params.Cards.Platforms.Description | markdownify }}
                </p>
                <br>
                <div class="grid flex-center">&nbsp;
                    {{ range .Params.Cards.Platforms.Links }}
                    <div>
                        <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
                            <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
                        </a>&nbsp;
                    </div>
                    {{ end }}
                </div>
            </div>
        </div>
    </div>
</section>
{{ end }}