{{ partial "header" . }}
<div class="auto-container pt-3 pt-md-2 mb-5">
    <div class="row clearfix">
        <!-- Content Side -->
        <section class="col-lg-12 col-md-12 col-sm-12">
            {{ .Scratch.Set "scope" "single" }}
            <article class="article article_narrow article_bb mb-4">
                <div class="article__cover mt-lg-5 mb-4">
                    <picture>
                        <source srcset="{{ .Params.preview_dir }}/title.webp" type="image/webp">
                        <img alt="{{ .Title }}" src="{{ .Params.preview_dir }}/title.jpg">
                    </picture>
                </div>
                {{ partial "breadcrumbs" . }}
                <h1>{{ .Title }}</h1>
                {{ $wrappedTable := printf "<div class=table-responsive> ${1} </div>" }}
                {{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
            </article>
            <div class="pt-3">{{ partial "author" . }}</div>
            <div class="article__info mt-4">
                <span class="d-inline-block mb-2 mb-md-0">
                    {{if .Date }}{{ .Date | time.Format ":date_long" }}&nbsp;&nbsp;|&nbsp;&nbsp;{{end}}
                </span>
                {{ partial "share-post" . }}
            </div>
        </section>
    </div>
</div>
<div style="background: var(--brand-light);">
    <div class="auto-container pt-5 pb-5">
        <div class="row clearfix pt-4">
            {{ range where site.Pages "Section" "articles" | first 3 }}

            <!-- Project Block -->
            <div class="d-flex col-md-4 col-sm-12">
                {{ partial "article-card" (dict "context" .) }}
            </div>
            {{ end }}
        </div>
    </div>
</div>
{{ partial "contact-section" . }}
{{ partial "footer" . }}