{% macro blog_posts(count) %}
{% set articles = get_section(path="blog/_index.md") %}
{% set latest = articles.pages | slice(end = count) %}
{% for article in latest %}
<div class="block">
	<a class="banner" href="{{ article.permalink | safe }}"><img loading="lazy" src="{{ article.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Article cover image" /></a>
	<h2 class="headline"><a href="{{ article.permalink | safe }}">{{ article.title }}</a></h2>
	<div class="summary">
	<p>{{ article.summary | striptags | safe }}</p>
	</div>
	<a href="{{ article.permalink | safe }}" class="link arrow">Keep reading</a>
</div>
{% endfor %}
{% endmacro blog_posts %}

{% macro text_balancer() %}
<style>
.balance-text {
	visibility: hidden;
}

@media (scripting: none) {
	.balance-text {
		visibility: visible !important;
	}
}

@supports (text-wrap: balance) {
	.balance-text,
	.balanced-text {
		text-align: left;
		text-wrap: balance;
		visibility: visible;
	}
}
</style>
<script>
{{ load_data(path="static/text-balancer.js", format="plain") | safe }}
</script>
{% endmacro text_balancer %}